Django ImageField小部件添加带有可清除复选框的缩略图

时间:2014-11-21 22:47:30

标签: django checkbox django-admin django-models django-widget

我有这样的模型

class Participation(models.Model):
    # ... some attributes ...
    thumbnail = models.ImageField(
        verbose_name='immagine di copertina',
        blank=True,
        null=True,
    )

我添加以下代码以在管理页面中显示缩略图:

class AdminImageWidget(ClearableFileInput):
"""A ImageField Widget for admin that shows a thumbnail"""

def render(self, name, value, attrs=None):
    output = []
    if value and getattr(value, 'url', None):
        image_url = value.url
        file_name = str(value)
        output.append(
            u'%s '
            u'<a href="%s" target="_blank">'
            u'<img src="%s" alt="%s" style="max-width: 100px; max-height: 100px; border-radius: 5px;" />'
            u'</a><br/><br/>%s '
            % (_('Currently:'), image_url, image_url, file_name, _('Change:'))
        )
    output.append(super(ClearableFileInput, self).render(name, value, attrs))
    return mark_safe(u''.join(output))

即使它对缩略图工作正常,super(ClearableFileInput, self).render(name, value, attrs)调用只是添加浏览按钮,但它没有显示清除复选框,因此我无法删除所选缩略图

这段代码有什么问题?如何添加隐藏缩略图的复选框呢?

1 个答案:

答案 0 :(得分:3)

我解决了重新编码AdminImageWidget的问题,如下所示:

from django.utils.safestring import mark_safe
from django.utils.html import escape, conditional_escape
from django.utils.encoding import force_unicode
from django.forms.widgets import ClearableFileInput, Input, CheckboxInput


class AdminImageWidget(ClearableFileInput):
    def render(self, name, value, attrs=None):
        substitutions = {
            'initial_text': self.initial_text,
            'input_text': self.input_text,
            'clear_template': '',
            'clear_checkbox_label': self.clear_checkbox_label,
        }
        template = '%(input)s'
        substitutions['input'] = Input.render(self, name, value, attrs)

        if value and hasattr(value, "url"):
            template = self.template_with_initial
            substitutions['initial'] = (
                '<img src="%s" alt="%s" style="max-width: 100px; max-height: 100px; border-radius: 5px;" /><br/>' % (
                    escape(value.url), escape(force_unicode(value))
                )
            )
            if not self.is_required:
                checkbox_name = self.clear_checkbox_name(name)
                checkbox_id = self.clear_checkbox_id(checkbox_name)
                substitutions['clear_checkbox_name'] = conditional_escape(checkbox_name)
                substitutions['clear_checkbox_id'] = conditional_escape(checkbox_id)
                substitutions['clear'] = CheckboxInput().render(checkbox_name, False, attrs={'id': checkbox_id})
                substitutions['clear_template'] = self.template_with_clear % substitutions

        return mark_safe(template % substitutions)

请注意:

substitutions['initial'] = (
    '<img src="%s" alt="%s" style="max-width: 100px; max-height: 100px; border-radius: 5px;" /><br/>' % (
        escape(value.url), escape(force_unicode(value))
    )
)

可以显示缩略图。