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>

ウェブページ

Powered by Movable Type 4.261

このアーカイブについて

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。