Movable Type でカスタムフィールドの画像を表示する方法

2011年4月27日 14:17 Movable Type でカスタムフィールドの画像を表示する方法

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 のモディファイアが使用可能なので、サムネイル画像のサイズ調整も行なえます。

Twitterつぶやく
関連するブログ記事
スポンサード リンク
カテゴリー
Movable Type 4 | Movable Type 5
タグ
Movable Type | MTAssetThumbnailLink | MTAssetThumbnailURL | カスタムフィールド

コメント(27) | トラックバック(0)

 

このブログについて

阿部辰也

Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。

阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。

Twitter: @t_abe
読書メーター: ID:Tatsuya

このブログのサイトマップ
このブログのはてなブックマーク数

Feed/RSS購読

タグクラウド

最近のトラックバック

阿部辰也の著書

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

頑張って書いたのに、出版後すぐに出版社が倒産して印税も貰えずじまいで俺涙目(笑)。

Powered by Movable Type 5.02

スポンサード リンク

はてなブックマーク



あわせて読みたい

t-abeの今読んでる本

t-abeの最近読んだ本

t-abeの今やってるゲーム

t-abeの最近やったゲーム