エントリー本文
カスタムフィールドでアップロードした画像をテンプレートタグで表示する
Movable Type 4.1 で追加されたカスタムフィールド機能で、画像(アイテム)をアップロードすると、記事中にはテキストリンクしか表示されないため「なんとかならないでしょうか?」というコメントを多く頂いてます。
その関係で、先日「カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン VisibleCustomFieldImage」を公開しましたが、Movable Type の公式サイトにテキストリンクではなく、画像を表示する方法が掲載されています。
この方法を使えば、より簡単に画像を表示することができます。
ということで、本エントリーにて具体的な設定方法を情報展開しておきます。
サンプルとして、次のようなカスタムフィールドを作成します。

ブログ記事に表示されたカスタムフィールドを使って、次の画像をアップロードします。

テンプレートモジュール「ブログ記事の概要」に、次のタグを設定します。
<MTIfNonEmpty tag="photo">
<MTphotoAsset><img src="<$MTAssetURL$>" /></MTphotoAsset>
</MTIfNonEmpty>
カスタムフィールドの作成時に指定したテンプレートタグの末尾に「Asset」を追加したテンプレートタグ名がブロックタグとして使えます。サンプルでは、「MTphoto」というタグを作ったので「MTphotoAsset」となります。
そして、このブロックタグの中では、Movable Type 標準のアイテム関連タグが利用できます。
上のタグをテンプレートモジュールの次の位置に設定します。

「てすと」というタイトルで投稿すると、次のように表示されました。
次に、MTAssetThumbnailLink タグでサムネイル指定をしてみます。
<MTIfNonEmpty tag="photo">
<MTphotoAsset><$MTAssetThumbnailLink width="150"$></MTphotoAsset>
</MTIfNonEmpty>
上のタグをテンプレートモジュールの次の位置に設定します。

「てすと」というタイトルで投稿すると、次のようにサムネイルが表示されました。
- 他人の Movable Type 4 へのコメント投稿で Movable Type 認証を利用する方法
- Movable Type セキュリティアップデートとパッチの提供
- Movable Type(MT)テンプレート
- MovableType のテンプレートを簡単にバックアップする Template Backup and Refresh プラグインの使い方
- 背景画像を固定する
- 123万4567アクセス特別企画
- 【TB企画】名前の由来を教えてください+α
- Movable Type プラグイン一覧(MT4対応)
- Movable Type 4 を始める前に設定しておきたい 10 の項目
- Movable Type 4.2のコメント投稿フォームの変更点
はじめまして。カテゴリ編集画面に画像アップロードのカスタムフィールドを追加したのですが、表示させるためにテンプレートに埋め込むタグがわかりません。
エントリー記事に追加した画像は、紹介していただいてる記事を参考にさせていただき、難なくできたのですが…
もしご存知でしたら教えていただけますでしょうか? よろしくお願いします。
>コスギさん
はじめまして。
ご返事遅くなってすいません。
こちらでも確認してみましたが、この方法ではカテゴリーでは動作しないようですね(バグと思われます)。表示されました。
>yujiroさん
検証していただきありがとうございます。
カテゴリを画像表示にしたくて、フィールドを追加したのですが、
各カテゴリに対応した画像というものがでてきません。
1種類のみは表示されるのですが、、
もしよろしければ、どのようなタグで成功したのか教えてください。
よろしくお願いします。
>コスギさん
こんばんは。
曖昧な回答ですいません。
試したのは次のサブテンプレートです(青色が追加部分)
サイドバーのカテゴリーリストに画像を表示
<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
<h3 class="widget-header">カテゴリ</h3>
<div class="widget-content">
<mt:TopLevelCategories>
<mt:SubCatIsFirst>
<ul class="widget-list">
</mt:SubCatIsFirst>
<mt:IfNonZero tag="mt:CategoryCount">
<li class="widget-list-item"><a href="<$mt:CategoryArchiveLink$>"<mt:IfNonEmpty tag="mt:CategoryDescription"> title="<$mt:CategoryDescription$>"</mt:IfNonEmpty>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
<MTcategoryphotoAsset><img src="<$MTAssetURL$>" /></MTcategoryphotoAsset>
<mt:Else>
<li class="widget-list-item"><$mt:CategoryLabel$>
</mt:IfNonZero>
<$mt:SubCatsRecurse$>
</li>
<mt:SubCatIsLast>
</ul>
</mt:SubCatIsLast>
</mt:TopLevelCategories>
</div>
</div>
</mt:IfArchiveTypeEnabled>
ブログ記事リストに画像を表示
:
<MTIf name="datebased_archive">
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
</MTEntries>
<MTElse>
<MTIfNonEmpty tag="categoryphoto">
<mt:categoryphotoasset><$MTAssetThumbnailLink width="150"$></mt:categoryphotoasset>
</MTIfNonEmpty>
<MTEntries limit="auto">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
</MTEntries>
</MTIf>
:
なお、ローカルPCで試したところ、表示できないものもありましたので、カスタムフィールド機能に不具合があるのかも知れません。
それではよろしくお願い致します。
>yujiroさん
御礼が遅くなりました。
教えていただいた方法で表示できました!
カテゴリを画像表示にすることができて大満足です^^
『CMSとして使うMovable Typeガイドブック』も活用させていただいてます★
今後ともどうぞよろしくお願いします。
