MTAssetsタグを利用した画像の自動表示
MT4より新しく追加されたタグ<MTAssets>を利用して、エントリーと関連付けされた画像を自動で表示させる方法をご紹介します。
ECサイトなどで良くみかける商品のサムネイルを自動で表示させるのに利用できるかと思います。
<MTAssets>タグは、ブログのアイテム一覧を表示させるためのタグで、アイテムの種類は、画像、オーディオ、ビデオと3種類あります。
タグの利用方法などはSixApart社より公開されていますのでそちらをご覧ください。
アイテム管理機能で追加された Movable Type テンプレートタグ
まずテンプレートに記述するタグを説明します。
インデックステンプレートの<MTEntries>タグ内に以下のコードを追加してください。
<MTIfNonEmpty tag="EntryKeywords">
<MTSetVarBlock name="entry_keywords">
<$MTEntryKeywords$>
</MTSetVarBlock>
<MTAssets tag="$entry_keywords">
<a href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL height="70"$>" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a>
</MTAssets>
<MTElse>
<strong>商品画像はありません。</strong>
</MTElse>
</MTIfNonEmpty>
このコードは、エントリーのキーワードに何か記述されているかどうかを確認して、何も記述されていない場合は、「商品画像はありません」と表示されます。
キーワードに文字が記述されていた場合は、その文字と同じ画像のタグを探して、画像を表示します。
少しわかりずらいので、画像をいれて説明します。
まず、インデックステンプレートにコードを入力したら、画像をアップロードします。
画像をアップロードしたら次に、その画像の説明とタグを入力できる画面が表示されるかと思います。
そのタグのところに、適当な文字を入力してください。
サンプル例では、「イントラブログ」と入力しました。
次に、エントリーの編集画面で、キーワードを入力します。ここで入力するキーワードは、さきほど画像のタグに入力した文字を入力します。
サンプル例では、「イントラブログ」と入力したので、ここでも「イントラブログ」と入力します。
その後、記事を投稿してインデックスページを確認してください。
エントリーのキーワードと画像のタグは一致しているかどうかを判定して表示しているため、複数の画像に同じタグを入力すれば、複数の画像が自動で表示されます。
例えば、製品には製品番号があるかと思いますが、画像に製品番号をタグで入力すれば、その画像がすべて自動で表示されます。