Customization of Django Admin Interface.

Today let's learn how to customize the admin panel of Django. When I started learning the Django framework, I was very fascinated by one of the most powerful parts of Django is the automatic admin interface. It reads metadata from your models to provide a quick, model-centric interface where trusted users can manage content on your site.

Introduction:

• Django is a back-end server-side web framework.
• It is free and open-source.
• It is written in Python.
• Django Admin is one of the most powerful parts of Django is the automatic admin interface.

Let's start customizing the Django Admin Panel (चलिये शुरू करते हैं ! )

1. How do I modify the header of the Django Admin Panel?

fig. 1

• As you can see from the above image Django provides the default header as ‘Django administration’.
• And we will see how to change it to ‘Admin Customization’
• To change the header of the Admin Panel we need to make some changes in the urls.py file of the project as you can see from the below Scripts.

#admincustom/urls.py 
from django.contrib import
admin from django.urls import path  
# Add this it change the header of the admin panel. admin.site.site_header = 'Admin Customization'
urlpatterns = [
     path('admin/', admin.site.urls),
 ]

Now we can see, that the header of the admin panel has been changed to Admin Customization.

fig. 2

I think you all are enjoying this customization of the admin panel and let's move forward to change the admin panel.

2. How do I alter the site title in the django admin panel?

fig. 3

• By looking at the above image you all already understand what we will change.
• For changing the Site Title of the Admin Panel we need to follow the same step as we did in header changing.
• Open the urls.py file of the project and add admin.site.index_title as we are doing in the below scripts.

#admincustom/urls.py
from django.contrib import admin
from django.urls import path
admin.site.site_header = 'Admin Customization'
#Add the below line
admin.site.index_title = 'Customization App'
urlpatterns = [
path('admin/', admin.site.urls),
]

Now we can see, that the Site Title of the admin panel has been changed to Customization App as below image.

fig. 4

3. How to register the model in the admin Panel.

• Most of you know how to register a model in Admin Panel.
• But Here we will divide the fields into the sub-section.

Let's first create a model

# api/models.py

from django.db import models

# Create your models here.
GENDER =[
    ('male', 'Male'),
    ('female', 'Female'),
    ('other', 'Other')
]


class Students(models.Model):
    firstname = models.CharField(max_length=100)
    lastname = models.CharField(max_length=100)
    age = models.IntegerField()
    gender = models.CharField(max_length=20, choices=GENDER)
    address = models.CharField(max_length=200)
    school_name = models.CharField(max_length=200)
    standard = models.IntegerField()
    father_name = models.CharField(max_length=200)
    mother_name = models.CharField(max_length=200)
    parent_contact_number = models.CharField(max_length=200)
    profile_image = models.ImageField(upload_to='profile_images')

• The student's table has been created.
• Let's register this model in the Admin panel
• For that, we need to add the below scripts admin.py file of the project.

# api/admin.py
from django.contrib import admin
from .models import Students

@admin.register(Students)
class StudentsAdmin(admin.ModelAdmin):
    pass

• After registering it in the admin panel it will look like as below while entering the data in the admin panel.

fig. 6

• Suppose we need to do fields in sub-sections while entering the data from Django Admin eg.
• Personal Informations section we include (firstname, lastname, age, gender, address, profile_image) fields
• School Details section (school_name, standard) fields.
• Parent Details section (father_name, mother_name, parent_contact_number) fields.

The above scenario can be achieved with the help of fieldsets.

@admin.register(Students)
class StudentAdmin(admin.ModelAdmin):
fieldsets = (
('Personal Informations', {
'fields': ('firstname', 'lastname', 'age',
'gender','address','profile_image')
}),
('School Details', {
'classes': ('wide',),
'fields': ('school_name', 'standard'),
}),
('Parent Details', {
'classes': ('wide',),
'fields': ('father_name','mother_name','parent_contact_number'),
}),
)

• Add the above code in the admin.py
• Now when we will insert the data in the admin it will look as below.

fig. 7

4. Change the model class name in the Django admin interface.

fig. 8

• Whenever we register a model in the admin.py file of an APP, It will appear in the Django admin interface as you can see from the above image.
• Suppose you wanted to show the student model as Student details in the admin interface.
• So for that, you need to mention it while creating the table like we did in the below code snippet.

# api/models.py

from django.db import models

# Create your models here.
GENDER =[
    ('male', 'Male'),
    ('female', 'Female'),
    ('other', 'Other')
]


class Students(models.Model):
   ......................

    class Meta:
        verbose_name = "Student Detail"
        verbose_name_plural = "Student Details"

fig. 9

5. How to change app name in Django admin interface.

fig. 10

• By looking at the above I think you all may the idea what we are going to change.
• Suppose I wanted to give APP name to Student APP.
• For that, I need to add verbose_name to apps.py file of the APP.

from django.apps import AppConfig
class AppConfig(AppConfig):
      name = 'app'
      #Add this
      verbose_name = "Student APP"

Now, check out the below image.

fig. 11

6. How do we show images in the admin Panel.

#admin.py
from django.contrib import admin
from .models import Students
from django.utils.html import mark_safe
from django.utils.html import format_html
# Register your models here.
@admin.register(Students)
class StudentAdmin(admin.ModelAdmin):
   list_display=('full_name','age','father_name',
         'mother_name'r',"profile_pic")
   def profile_pic(self, obj):
       return mark_safe(f'<img src="/{obj.profile_image}"     width="150" height="150"/>')

Showing an image in the admin with other fields is possible for that we need to create a function and have to mention inside list_display=(‘profile_pic’) as we did in the above Scripts.

7. How can we combine two fields while showing data in the Admin panel.

# admin.py
@admin.register(Students)
class StudentAdmin(admin.ModelAdmin):
     list_display=('full_name','age','gender','address')
def full_name(self, obj):
      return obj.firstname + " " + obj.lastname

I think you all already understand what I am trying to do here.

In our model, we have firstname and lastname but we want it shows the data in the admin panel it shows both in one column so we make a function full_name where we are just merging the firstname and lastname.

Please check out the Second part

Customization of Django Admin Interface Part -2

Thank you for reading. If you find something wrong or better ways to do it, let me know in the comments below.

If you like the post, hit the 👏 button below so that others may find it useful. You can follow me on GitHub and connect with me on Linkedin.