MTタグ逆引き辞典

記事一覧に記事のサムネイル画像を表示させる

記事一覧に記事内で使用している画像を表示させたい場合は、MTAssetThumbnailURLを使用すると便利です。
MTAssetThumbnailURLは記事のサムネイル画像のURLを取得するMTタグです。MTEntryAssetsMTAssetsタグ内で使用します。

以下、インデックスページのテンプレートへの記述例です。

テンプレート記述例

<mt:Entries lastn="5">
	<a href="<$mt:EntryPermalink$>">
		<mt:EntryAssets type="image" sort_order="ascend" limit="1">
			<figure><img src="<$mt:AssetThumbnailURL width="320"$>"></figure>
		<mt:Else>
			<figure class="noimage"><span>No image</span></figure>
		</mt:EntryAssets>
		<div class="entry-detail">
			<h1><$mt:EntryTitle encode_html="1"$></h1>
			<p><$mt:EntryExcerpt$></p>
		</div>
	</a>
</mt:Entries>

上記例では、最新記事5件分のサムネイル画像を記事のタイトル、記事の概要と合わせて出力し、記事のサムネイル画像がない場合は「No image」を表示させています。

MTEntriesタグは、ブログ記事一覧を取得するためのブロックタグです。lastn="5"を設定して、最新記事5件分を取得しています。MTEntryPermalinkタグは、ブログ記事の絶対URLを取得するタグです。記事へのリンクに使用しています。

MTEntryAssetsタグはブログ記事内のアイテムを取得するためのブロックタグです。MTEntryAssetsタグのモディファイアでは、取得するアイテムのタイプや取得する数などを指定できます。上記例では、type="image"で画像に絞り込み、sort_order="ascend"で昇順にソートし、limit="1"で1つの画像を取得するようにしています。
サムネイル画像のURLを取得する場合は、MTAssetThumbnailURLタグを使用します。widthで取得する画像の横幅を設定できます。

MTElseは条件が合致しなかったときに実行するブロックタグです。上記例ではMTEntryAssetsタグで設定した内容、つまり記事に画像がない場合には

<figure class="noimage"><span>No image</span></mt:Unless></figure>
を出力するようにしています。

MTEntryTitleタグは記事のタイトルを取得するタグです。encode_html="1"を設定し、HTML エンコードしています。MTEntryExcerptタグは記事の概要を取得するタグです。ブログの記事に概要がない場合、記事本文より設定されている文字数分取得します。

使用したMTタグはこちら

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス