カスタムフィールドでアップロードした画像をテンプレートタグで表示する
Movable Type 4.1 で追加されたカスタムフィールド機能で、画像(アイテム)をアップロードすると、記事中にはテキストリンクしか表示されないため「なんとかならないでしょうか?」というコメントを多く頂いてます。
その関係で、先日「カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン VisibleCustomFieldImage」を公開しましたが、Movable Type の公式サイトにテキストリンクではなく、画像を表示する方法が掲載されています。
この方法を使えば、より簡単に画像を表示することができます。
ということで、本エントリーにて具体的な設定方法を情報展開しておきます。
サンプルとして、次のようなカスタムフィールドを作成します。
ブログ記事に表示されたカスタムフィールドを使って、次の画像をアップロードします。
テンプレートモジュール「ブログ記事の概要」に、次のタグを設定します。
<MTIfNonEmpty tag="photo">
<MTphotoAsset><img src="<$MTAssetURL$>" /></MTphotoAsset>
</MTIfNonEmpty>
カスタムフィールドの作成時に指定したテンプレートタグの末尾に「Asset」を追加したテンプレートタグ名がブロックタグとして使えます。サンプルでは、「MTphoto」というタグを作ったので「MTphotoAsset」となります。
そして、このブロックタグの中では、Movable Type 標準のアイテム関連タグが利用できます。
上のタグをテンプレートモジュールの次の位置に設定します。
「てすと」というタイトルで投稿すると、次のように表示されました。
次に、MTAssetThumbnailLink タグでサムネイル指定をしてみます。
<MTIfNonEmpty tag="photo">
<MTphotoAsset><$MTAssetThumbnailLink width="150"$></MTphotoAsset>
</MTIfNonEmpty>
上のタグをテンプレートモジュールの次の位置に設定します。
「てすと」というタイトルで投稿すると、次のようにサムネイルが表示されました。