django - DjangoでウィジェットのHTML出力をカスタマイズするにはどうすればよいですか？

Question

ドキュメントでこれを見つけることができませんでしたが、それは可能であるに違いないと思います。特にClearableFileInputウィジェットについて話しています。django 1.2.6のプロジェクトから、私はこのフォームを持っています：

# the profile picture upload form
class ProfileImageUploadForm(forms.ModelForm):
    """
    simple form for uploading an image. only a filefield is provided
    """
    delete = forms.BooleanField(required=False,widget=forms.CheckboxInput())

    def save(self):
        # some stuff here to check if "delete" is checked
        # and then delete the file
        # 8 lines

    def is_valid(self):
        # some more stuff here to make the form valid
        # allthough the file input field is empty
        # another 8 lines

    class Meta:
        model = SocialUserProfile
        fields = ('image',)

次に、このテンプレートコードを使用してレンダリングしました。

<form action="/profile/edit/" method="post" enctype="multipart/form-data">
    Delete your image:
<label> {{ upload_form.delete }} Ok, delete </label>
<button name="delete_image" type="submit" value="Save">Delete Image</button>
    Or upload a new image:
    {{ upload_form.image }}
    <button name="upload_image" type="submit" value="Save">Start Upload</button>
{% csrf_token %}
</form>

Django 1.3.1はデフォルトのウィジェットとしてClearableFileInputを使用するようになったため、form.saveの16行をスキップして、次のようにフォームコードを短縮できると確信しています。

# the profile picture upload form
class ProfileImageUploadForm(forms.ModelForm):
    """
    simple form for uploading an image. only a filefield is provided
    """

    class Meta:
        model = SocialUserProfile
        fields = ('image',)

それは私があまりカスタマイズされていないフォームコードを持っていて、Djangoビルトインに頼ることができるという良い感じを私に与えるでしょう。

もちろん、html出力を以前と同じに保ちたいと思います。既存のテンプレートコードだけを使用すると、「Currently：somefilename.png」のようなものが不要な場所にポップアップ表示されます。

フォームフィールドをさらに分割すると、うまく{{ upload_form.image.file }}いかないようです。次に頭に浮かぶのは、カスタムウィジェットを作成することでした。これは、カスタマイズされたコードをできるだけ多く削除するという私の努力に正反対に機能します。

このシナリオで行う最も簡単なことは何ですか？

Answer 1

まず、widgets.pyアプリでファイルを作成します。私の例では、AdminImageWidget拡張するクラスを作成しますAdminFileWidget。<img src="" />基本的に、ファイルのパスを出力するだけでなく、現在アップロードされている画像をタグに表示する画像アップロード フィールドが必要です。

次のクラスをwidgets.pyファイルに入れます。

from django.contrib.admin.widgets import AdminFileWidget
from django.utils.translation import ugettext as _
from django.utils.safestring import mark_safe
import os
import Image

class AdminImageWidget(AdminFileWidget):
    def render(self, name, value, attrs=None):
        output = []
        if value and getattr(value, "url", None):

            image_url = value.url
            file_name=str(value)

            # defining the size
            size='100x100'
            x, y = [int(x) for x in size.split('x')]
            try :
                # defining the filename and the miniature filename
                filehead, filetail  = os.path.split(value.path)
                basename, format        = os.path.splitext(filetail)
                miniature                   = basename + '_' + size + format
                filename                        = value.path
                miniature_filename  = os.path.join(filehead, miniature)
                filehead, filetail  = os.path.split(value.url)
                miniature_url           = filehead + '/' + miniature

                # make sure that the thumbnail is a version of the current original sized image
                if os.path.exists(miniature_filename) and os.path.getmtime(filename) > os.path.getmtime(miniature_filename):
                    os.unlink(miniature_filename)

                # if the image wasn't already resized, resize it
                if not os.path.exists(miniature_filename):
                    image = Image.open(filename)
                    image.thumbnail([x, y], Image.ANTIALIAS)
                    try:
                        image.save(miniature_filename, image.format, quality=100, optimize=1)
                    except:
                        image.save(miniature_filename, image.format, quality=100)

                output.append(u' <div><a href="%s" target="_blank"><img src="%s" alt="%s" /></a></div> %s ' % \
                (miniature_url, miniature_url, miniature_filename, _('Change:')))
            except:
                pass
        output.append(super(AdminFileWidget, self).render(name, value, attrs))
        return mark_safe(u''.join(output))

さて、ここで何が起こっているのですか？

1. 既存のウィジェットをインポートします (ゼロから始めている可能性がありますが、それが最初からのものである場合は、おそらく ClearableFileInput を拡張できるはずです)
2. 基になるロジックではなく、ウィジェットの出力/プレゼンテーションのみを変更したい。そこで、ウィジェットのrender機能をオーバーライドします。
3. レンダリング関数では、必要な出力を配列として作成しますoutput = []。これを行う必要はありませんが、連結を節約できます。3 つの重要な行:
   • output.append(u' <div><a href="%s" target="_blank"><img src="%s" alt="%s" /></a></div> %s ' % (miniature_url, miniature_url, miniature_filename, _('Change:')))出力に img タグを追加します
   • output.append(super(AdminFileWidget, self).render(name, value, attrs))親の出力をウィジェットに追加します
   • return mark_safe(u''.join(output))出力配列を空の文字列で結合し、表示前にエスケープから除外します

これをどのように使用しますか？

class SomeModelForm(forms.ModelForm):
    """Author Form"""
    photo = forms.ImageField(
        widget = AdminImageWidget()
    )

    class Meta:
        model = SomeModel

また

class SomeModelForm(forms.ModelForm):
    """Author Form"""
    class Meta:
        model = SomeModel
        widgets = {'photo' : AdminImageWidget(),}

これにより、次のことがわかります。