2021/07/10

WagtailのRichTextに画像フォーマットを追加する

RichTextの画像フォーマットを、解像度やファイル形式を変更して追加する方法を解説します。

WagtailのRichTextは、いわゆるWYSIWYGエディターのことで、サイト上での文章などの表示をエディターでの編集時の見た目と同じようにすることができるものです。RichTextを使うと、見出しや太字の設定、リンクや画像の追加などを簡単に行うことができ、直感的にコンテンツの内容を編集することができます。

RichTextはそのまま利用するだけでも画像を追加することができるようになっているのですが、その解像度やファイル形式、画像のクロップ形式を変更したい場合があります。今回は新しい画像フォーマットを追加する方法について解説します。

RichText内での画像フォーマットの取り扱い

WagtailのRichText内では画像を貼り付けることができます。この操作は便利な反面、開発者側で{% image %}のテンプレートタグで実装をコントロールすることができません。その代わりに、RichText内でどのように画像をHTMLに変換するかを指定することができます。

編集者がエディター内で画像を貼り付ける際に指定する画像の種類のことをFormatと呼び、デフォルトではFull width、Left-aligned、Right-alignedの三つのフォーマットが実装されています。

Full width: <img>タグにfull-widthというクラス名を与え、width-800の画像に変換して表示
Left-aligned: <img>タグにleftというクラス名を与え、width-500の画像に変換して表示
Right-aligned: <img>タグにrightというクラス名を与え、width-500の画像に変換して表示

ここでのポイントは、各画像にはそれぞれのクラス名が与えられるだけであり、その表示方法は開発者側で決めて実装する必要があるということです。

つまり、特に何も実装しなければ、デフォルトの三つのフォーマットで表示される画像は、解像度の違いをのぞいて全く一緒です。たとえば開発者は、Left-alignedのクラスに対しては画像をテキストの左側に回り込むように表示させるといった実装を求められています。

これらのフォーマットはデフォルトで利用できるようになってはいますが、新しいフォーマットを追加したり、すでに実装されているフォーマットを削除したりすることができます。

新しい画像フォーマットを追加する

Wagtailでは、ページがロードされる際にimage_formats.pyというファイルを読み込み、そこで定義されている画像フォーマットに従ってページを作成します。このファイルはRichTextを使うアプリケーションフォルダの中に定義します。（models.pyなどが定義されている通常のDjangoアプリケーション）

Wagtailの中で扱う画像は、wagtail.images.formatsのFormatというクラスをオーバーライドすることで定義することができます。

以下の例では、400x400の正方形の画像フォーマットを追加しています。

# image_formats.py

from wagtail.images.formats import Format, register_image_format

register_image_format(Format(
                        'square', # 画像フォーマットを管理するユニークな名前
                        'Square 400', # 管理画面で表示する名前
                        'richtext-image square-400', # 挿入されるimgタグのclass属性
                        'fill-400x400')) # Wagtailの画像フィルタの指定

Formatクラスの引数は4つあり、上から順にname、label、classname、filter_spectです。

name: フォーマットを管理する名前。ユニークにする必要があり、この値で画像フォーマットを分類する
label: 管理画面のRichText上で画像フォーマットを選択する際に表示されるラベル名
classname: HTML上に挿入されるimgタグに付与されるclass属性。通常のCSSクラスと同じように記述する
filter_spec: Wagtailテンプレート上で表示される画像フィルタの指定。画像サイズやPNGなどのファイル形式を指定できる。

以上の引数を指定したFormatクラスをregister_image_formatでWagtail内で管理する画像フォーマットに登録することができます。

先に説明した、デフォルトで登録されている画像フォーマットも、Wagtailのソースコードを見れば同じように登録されているのがわかります。

# wagtail/images/formats.py

# Wagtailにデフォルトで登録されている画像フォーマット
register_image_format(Format('fullwidth', _('Full width'), 'richtext-image full-width', 'width-800'))
register_image_format(Format('left', _('Left-aligned'), 'richtext-image left', 'width-500'))
register_image_format(Format('right', _('Right-aligned'), 'richtext-image right', 'width-500'))

もし同じフォーマット名で内容を登録し直したい場合には、unregister_image_formatという関数を使って画像フォーマットの登録を解除することもできます。その後に、register_image_formatで新しく画像フォーマットを登録し直してください。

下記の例は、デフォルトのFull Widthの画像フォーマットのファイル形式をWebpに変更するための実装です。

# image_formats.py

from wagtail.images.formats import Format, unregister_image_format

# 既存の画像フォーマットの登録を解除する
unregister_image_format('fullwidth') # Formatのnameで指定した文字列を引数にとる

# Full widthの画像フォーマットのファイル形式をWebpに変更する
register_image_format(Format('fullwidth', _('Full width'), 'richtext-image full-width', 'width-800|format-webp'))

Webサイトのパフォーマンスを最大限発揮するためにはコンテンツ内の画像の解像度やファイル形式を最適化する必要があります。Wagtailのデフォルトの画像フォーマットでも大きな問題にはなりませんが、より快適なWebサイトを作成するためにはRichText内の画像フォーマットにも気を配るようにしましょう。