6.45 カスタムフィールドで画像を表示する ★
P.595
●カスタムフィールドの画像をメインページ・アーカイブページに表示する
「ブログ記事の概要」テンプレートモジュール(サンプルテンプレート)
<div class="content">
<h2 id="a<mt:entryID pad="1" />" class="entry-header"><a href="<mt:entryPermalink valid_html="1" />"><mt:entryTitle encode_html="1" /></a></h2>
<mt:include module="メタデータ" />
<div class="entry-content clearfix">
<mt:if tag="photo">
<p><mt:photoAsset><img src="<mt:assetURL />" /></mt:photoAsset></p>
</mt:if>
<mt:if tag="entryBody">
<mt:entryBody />
</mt:if>
...後略...
<mt:if tag="カスタムフィールドタグ名">
<mt:カスタムフィールドタグ名 />
</mt:if>
<mt:if tag="photo">
<mt:photo />
</mt:if>
<p><mt:photoAsset><img src="<mt:assetURL />" /></mt:photoAsset></p>
★「ブログ記事の概要」テンプレートモジュール(デフォルトテンプレート)
追加箇所は002~006です。002のifNonEmptyタグで、photoタグを判定し、内容があればブロック内を実行します。004のphotoAssetタグは、画像を表示するための特殊なテンプレートタグです。
...前略...
001: <div class="asset-content entry-content">
002:<mt:ifNonEmpty tag="photo">
003: <div class="asset-body">
004: <mt:photoAsset><img src="<mt:assetURL />" /></mt:photoAsset>
005: </div>
006:</mt:ifNonEmpty>
007:<MTIfNonEmpty tag="EntryBody">
008: <div class="asset-body">
009: <$MTEntryBody$>
010: </div>
011:</MTIfNonEmpty>
...後略...
●カスタムフィールドの画像をブログ記事ページに表示する
「ブログ記事」アーカイブテンプレート
...前略...
<div class="entry-content clearfix">
<mt:if tag="photo">
<p><mt:photoAsset><img src="<mt:assetURL />" /></mt:photoAsset></p>
</mt:if>
<mt:if tag="entryBody">
<div class="entry-body"><mt:entryBody /></div>
</mt:if>
...後略...
★「ブログ記事」アーカイブテンプレート(デフォルトテンプレート)
元のテンプレートに004~008を追加しています。
...前略...
001: </div>
002:</div>
003:<div class="asset-content entry-content">
004:<mt:ifNonEmpty tag="photo">
005: <div class="asset-body">
006: <mt:photoAsset><img src="<mt:assetURL />" /></mt:photoAsset>
007: </div>
008:</mt:ifNonEmpty>
009:<MTIfNonEmpty tag="EntryBody">
010: <div class="asset-body">
011: <$MTEntryBody$>
012: </div>
013:</MTIfNonEmpty>
...後略...
P.597
カスタムフィールドの画像をサムネイル画像で表示する
●メインページ・アーカイブページに画像を表示する
「ブログ記事の概要」テンプレートモジュール(サンプルテンプレート)
...前略...
<p><mt:photoAsset><mt:assetThumbnailLink width="200" /></mt:photoAsset></p>
...後略...
★「ブログ記事の概要」テンプレートモジュール(デフォルトテンプレート)
デフォルトテンプレートの場合は、前項の「カスタムフィールドの画像をメインページ・アーカイブページに表示する」の「ブログ記事の概要」テンプレートモジュールの004を、次のように変更します。
...前略...
004: <mt:photoAsset><mt:assetThumbnailLink width="200" /></mt:photoAsset>
...後略...
●ブログ記事ページに画像を表示する
「ブログ記事」アーカイブテンプレート(サンプルテンプレート)
...前略...
<p><mt:photoAsset><mt:assetThumbnailLink width="200" /></mt:photoAsset></p>
...後略...
★「ブログ記事」アーカイブテンプレート(デフォルトテンプレート)
デフォルトテンプレートの場合は、前項の「カスタムフィールドの画像をブログ記事ページに表示する」の「ブログ記事」アーカイブテンプレートの006を、次のように変更します。
...前略...
006: <mt:photoAsset><mt:assetThumbnailLink width="200" /></mt:photoAsset>
...後略...
■カスタムフィールドの画像をアイテムと同様に扱うVisibleCustomFieldImageプラグイン
<mt:if tag="photo">
<p><mt:photo></p>
</mt:if>