Python Django: Preview images in the admin add/change form (NOT list_display)

Using Django
#1

I know how to preview images inside Django Admin with list_display , but since I have about 10 different images in one model, I also need to preview them inline, inside the add / change form , in fact I need to preview them next to the Choose File button (see screenshot):

Screenshot%20from%202019-11-22%2011-12-55

I tried this apporach, but it doesn’t work: Display thumbnail in Django admin inline

Does anyone know a current solution?

#2

When you say you need to preview them next to the ‘Choose file’ button, do you mean you want to display them before they have been uploaded?

#3

Thank you for the answer.
No I want to display them after they have been uploaded. By default the path + filename is displayed, which doesn’t bring real value, because you have to click each link to see each image, which is very cumbersome. Do you know a solution?

#4

It looks like you will need to dig through the Django admin HTML templates and figure out what to override. I don’t know of an out of the box solution, sorry.

#5

@saitam1
Six months have already passed so I’m not sure whether you need this now but I can overcome this problem so that I’d like to post.

My solution was the last answer of this page which you introduced.

from django.contrib import admin
from django.utils.safestring import mark_safe

class HOGEModelInline(admin.TabularInline):
    model = HOGEModel
    readonly_fields = ('image_preview',)

    def image_preview(self, obj):
        # ex. the name of column is "image"
        if obj.image:
            return mark_safe('<img src="{0}" width="150" height="150" style="object-fit:contain" />'.format(obj.image.url))
        else:
            return '(No image)'

    image_preview.short_description = 'Preview'

class PIYOAdmin(admin.ModelAdmin):
    inlines = [
        HOGEModelInline,
    ]