技術資料

error この記事は最終更新日から13年以上が経過しています。

Movable Type のカスタムフィールド機能で、フィールドの種類を「画像」にした場合、テンプレート内で、自分でカスタムフィールドに設定したテンプレートタグを書いても、そのまま画像は表示されず、その画像へのリンクが出力されてしまいます。

画像へのリンクではなく、直接画像を表示したい場合は、以下のように指定します。
※以下、カスタムフィールドに指定したテンプレートタグが <MTEntryImage> という仮定での記述です。

<MTEntryImageAsset>
<$MTAssetThumbnailLink$>
</MTEntryImageAsset>

上記のように、「設定したテンプレートタグ+Asset」というタグ内で「MTAssetThumbnailLink」を使用することで、カスタムフィールド画像のサムネイルが出力され、さらにアップロードした画像そのものにリンクします。

サムネイル画像のサイズを変更したい場合は、以下のモディファイアを使用します。

<!-- サムネイル画像の最大横幅を100pxに指定 -->
<$MTAssetThumbnailLink width="100"$>

<!-- サムネイル画像の最大縦幅を100pxに指定 -->
<$MTAssetThumbnailLink height="100"$>

<!-- サムネイル画像を実際の画像の50%の大きさに指定 -->
<$MTAssetThumbnailLink scale="50"$>

なお、前述の通り MTAssetThumbnailLink では、「サムネイル画像の出力」と「元画像へのリンク」の二つを自動的にやってしまいます。

画像の出力だけがしたい（元画像へのリンクは要らない）という場合は、MTAssetThumbnailURL というテンプレートタグを使用できます。
こちらは、サムネイル画像のURLのみを出力するためのテンプレートタグです。

<MTEntryImageAsset>
<img src="<$MTAssetThumbnailURL$>" />
</MTEntryImageAsset>

このように書けば、サムネイル画像だけを出力できます。

ちなみに、MTAssetThumbnailURL タグにも、width、height、scale のモディファイアが使用可能なので、サムネイル画像のサイズ調整も行なえます。