Django – add image to list display in django admin

Question

Please help me. I gave up. I am trying to add additional field to my django admin. I would like to insert image thumbnail there. This is part of my admin.py:

class SiteAdmin(admin.ModelAdmin):
    list_display = ('is_active', 'name', 'description', 'keywords', 'date')
    fields = ('name', 'url', 'category', 'subcategory', 'category1',
          'subcategory1', 'description',
          'keywords', 'date', 'group', 'email', 'is_active')
    readonly_fields = ('date',)
    list_display_links = ('name',)
    list_filter = ('is_active',)
    actions = [activate_sites, deactivate_sites]

I wolud like to add ‘image’ to list_display. Images are generating by thumbalizr. I have a method in models.py:

class Site(models.Model):
    category = models.ForeignKey('Category')
    subcategory = ChainedForeignKey(
        'SubCategory',
        chained_field='category',
        chained_model_field='category',
        show_all=False,
        auto_choose=True,
        blank=True, null=True, default=None)
    name = models.CharField(max_length=70, verbose_name="Tytuł")
    description = models.TextField(verbose_name="Opis")
    keywords = MyTextField(max_length=100, verbose_name="Słowa kluczowe")
    date = models.DateTimeField(default=datetime.now, editable=False)
    url = models.URLField()
    is_active = models.BooleanField(default=False)

    category1 = models.ForeignKey('Category', related_name='category',    blank=True, null=True, default=None)
    subcategory1 = ChainedForeignKey(
        'SubCategory',
        chained_field='category1',
        chained_model_field='category',
        related_name='subcategory',
        show_all=False,
        auto_choose=True, blank=True, null=True)

    group = models.CharField(max_length=10, choices=(('podstawowy', 'podstawowy'),
                                                 ('premium', 'premium')), default='podstawowy',
                         help_text="<div id='group'><ul><li>You can add site to 2 <b>categories</b></li></ul></div>")

    email = models.EmailField(help_text='Podaj adres email')

    def get_absolute_url(self):
        return reverse('site', args=[str(self.category.slug),
                                 str(self.subcategory.slug), str(self.id)])

    def get_thumb(self):
        host = urlparse(self.url).hostname
        if host.startswith('www.'):
            host = host[4:]
        thumb = 'https://api.thumbalizr.com/?url=http://' + host + '&width=125'
        return thumb

It is get_thumb(). How can I take image to every site and put in in my django admin page? Should I add additional field to my Site model? I don’t want to store images on my server – they are directly from thumbalizr.

Asked By: jundymek

||

Source

Answer 1

You should add a method into your modeladmin class. Then you can add this method into your field list.

class SiteAdmin(admin.ModelAdmin):
    list_display = [..., 'thumb']
    ...
    ...

    def thumb(self, obj):
        return "<img src='{}'  width='20' height='20' />".format(obj.get_thumb())

    thumb.allow_tags = True
    thumb.__name__ = 'Thumb'

https://docs.djangoproject.com/en/1.10/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display

Answered By: dirigeant

Answer 2

I was solving this problem in latest django 2.0.6. I wanted to achiave to have image thubnail and some more details in listview in django-admin.

I post answer here:
Django: Display image in admin interface

Answered By: TomRavn

Answer 3

You can create thumb column by defining thumb() and by assigning thumb() to list_display as shown below:

# "admin.py"

from django.contrib import admin
from .models import Site
from django.utils.html import format_html

@admin.register(Site)
class SiteAdmin(admin.ModelAdmin):
    list_display = (
        'is_active', 
        'name', 
        'description', 
        'keywords', 
        'date', 
        'thumb' # Here
    )

    # ...
    
    def thumb(self, obj): # Here
        return format_html(
            f'''<a href="{obj.get_thumb()}" target="_blank">
                  <img 
                    src="{obj.get_thumb()}" alt="{obj.get_thumb()}" 
                    width="50" height="50"
                    style="object-fit: cover;"
                  />
                </a>''')

Answered By: Kai – Kazuya Ito

Django – add image to list display in django admin

Question:

Answers: