django: предпросмотр картинки (поля ImageField) в админке

Выводить буду предпросмотр в таблице списка элементов модели (у меня это Image — "картинка") и, самое главное, в форме редактирования модели.Делаем в нашей модели метод, который возвращает готовый html-код предпросмотра картинки:

# Картинка
class Image(models.Model):
    title = models.CharField(max_length=255)
    imgfile = models.ImageField(upload_to='img/')

    def image_img(self):
        if self.imgfile:
            return u'< img src="%s" width="100"/>' % self.imgfile.url
        else:
            return '(none)'
    image_img.short_description = 'Thumb'
    image_img.allow_tags = True

Обратите внимание на image_img.allow_tags — это говорит о том, что разрешены сырые теги на выходе. Ещё я захардкодил размер картинки-превьюшки в image_img, можно как-то передавать и настраивать, но для простоты опустим. Также понятно, что картинка останется фактически большая, просто сожмётся визуально. Можно использовать специальную либу (есть удобные модули итд) и резать превьюшки, чтобы они были действительно мелкими.

Итак, превьюшка в таблице в админке делается элементарно, практически стандартным способом. В admin.py пишем в МодельАдмин:

...
class ImageAdmin(admin.ModelAdmin):
    list_display = ('title','imgfile','image_img', )
    …
…
admin.site.register(Image,ImageAdmin)
…

Результат:

Сложнее сделать предпросмотр в форме редактирования. Расскажу как сделал. Нам надо переопределить шаблон админки, он называется change_form.html. Создаём в своём каталоге с шаблонами файл такого вида: admin/приложение/модель/change_form.html . То есть, например, у меня так: .../templates/admin/db/image/change_form.html
Внутри переопределяем блок form_top. Можно и другой какой-то, на своё усмотрение, короче. Но этот удобен и, похоже, специально создан (пустым) для переопределения. Исходная модель в шаблоне именуется как original. Берём у неё точно так же метод image_img. И обязаельно применяем фильтр safe (чтобы теги не эскейпил). Получается такое:

{% extends "admin/change_form.html" %}

{% block form_top %}

{{ original.image_img|safe }}

{% endblock %}

Результат: