Movable Type でカスタムフィールドの画像を表示する方法
2011年4月27日 14:17
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 のモディファイアが使用可能なので、サムネイル画像のサイズ調整も行なえます。
つぶやく- 関連するブログ記事
-
- カテゴリー
- Movable Type 4 | Movable Type 5
- タグ
- Movable Type | MTAssetThumbnailLink | MTAssetThumbnailURL | カスタムフィールド
