• 活用ブログTOP
  • サムネイル機能と従来のカスタムフィールドの画像を共存させる方法
hayase hayase

サムネイル機能と従来のカスタムフィールドの画像を共存させる方法

サムネイル機能がリリースされ、新しい MTEntryThumbnailURL タグが追加されました。

MovableType.net で運営しているウェブサイトでは、多くの場合が、記事のカスタムフィールドでOGP画像を指定する運用をしているかと思います。

その場合、これまでカスタムフィールドで表示していた部分のMTタグを、サムネイル画像機能を表示する mt:EntryThumbnailURL タグに置き換える作業をしただけでは、サムネイル画像機能で生成された画像は表示されるようになりますが、過去の記事のカスタムフィールドで指定した画像が表示されなくなってしまいます。

そこで、「画像のカスタムフィールドがあればそれを優先的に表示し、なければサムネイル画像機能で生成した画像を表示する」テンプレートの記述方法を紹介します!

MTタグの記述例

具体的には、mt:If でカスタムフィールドに画像があるか? の条件分岐を行い、あればその画像のURLを出力し、なければサムネイル画像で生成された画像を表示するという仕組みです。
※ identiferの値は利用しているカスタムフィールドの識別子になります。

<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL$></mt:CustomFieldAsset><mt:Else><$mt:EntryThumbnailURL$></mt:If>

上のように記述することで、カスタムフィールドで指定している過去の記事の画像に関してはそのまま指定した画像が表示され、今後書く記事では、カスタムフィールドで指定しなければサムネイル画像機能で生成した画像を出力することができます。

記事一覧のサムネイル画像で利用する場合も上記と同様の方法で実現できますが、その場合はリサイズをしたほうが良いので mt:EntryThumbnailURL にモディファイアとして width="480" を追加することを推奨します(widthは480pxのみ指定可能です)。

<$mt:EntryThumbnailURL width="480"/$>

記事一覧のテンプレートでの記述例は次のようになります。

<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="480"$></mt:CustomFieldAsset><mt:Else><$mt:EntryThumbnailURL width="480"$></mt:If>

以上、現在運用中のサイトにサムネイル画像機能を導入する際の参考になれば幸いです。