カスタムフィールドでアップロードした画像をテンプレートタグで表示する

カスタムフィールドでアップロードした画像をテンプレートタグで表示する

Posted at February 15,2008 2:55 AM
Tag:[CustomField, Image, MovableType]

Movable Type 4.1 で追加されたカスタムフィールド機能で、画像(アイテム)をアップロードすると、記事中にはテキストリンクしか表示されないため「なんとかならないでしょうか?」というコメントを多く頂いてます。

その関係で、先日「カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン VisibleCustomFieldImage」を公開しましたが、Movable Type の公式サイトにテキストリンクではなく、画像を表示する方法が掲載されています。

カスタムフィールドでアップロードしたアイテムを表示するには
Via:MT4.1のカスタムフィールドで指定した画像を素直なタグで出力する。

この方法を使えば、より簡単に画像を表示することができます。
ということで、本エントリーにて具体的な設定方法を情報展開しておきます。

サンプルとして、次のようなカスタムフィールドを作成します。

カスタムフィールドを作成

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

画像をアップロード

テンプレートモジュール「ブログ記事の概要」に、次のタグを設定します。

<MTIfNonEmpty tag="photo">
<MTphotoAsset><img src="<$MTAssetURL$>" /></MTphotoAsset>
</MTIfNonEmpty>

カスタムフィールドの作成時に指定したテンプレートタグの末尾に「Asset」を追加したテンプレートタグ名がブロックタグとして使えます。サンプルでは、「MTphoto」というタグを作ったので「MTphotoAsset」となります。
そして、このブロックタグの中では、Movable Type 標準のアイテム関連タグが利用できます。

上のタグをテンプレートモジュールの次の位置に設定します。

タグをテンプレートモジュールに設定

「てすと」というタイトルで投稿すると、次のように表示されました。

「てすと」というタイトルで投稿

次に、MTAssetThumbnailLink タグでサムネイル指定をしてみます。

<MTIfNonEmpty tag="photo">
<MTphotoAsset><$MTAssetThumbnailLink width="150"$></MTphotoAsset>
</MTIfNonEmpty>

上のタグをテンプレートモジュールの次の位置に設定します。

タグをテンプレートモジュールに設定

「てすと」というタイトルで投稿すると、次のようにサムネイルが表示されました。

サムネイルが表示

関連記事
トラックバックURL


コメント

はじめまして。カテゴリ編集画面に画像アップロードのカスタムフィールドを追加したのですが、表示させるためにテンプレートに埋め込むタグがわかりません。

エントリー記事に追加した画像は、紹介していただいてる記事を参考にさせていただき、難なくできたのですが…

もしご存知でしたら教えていただけますでしょうか? よろしくお願いします。

[1] Posted by コスギ : March 12, 2008 9:43 PM

>コスギさん
はじめまして。
ご返事遅くなってすいません。
こちらでも確認してみましたが、この方法ではカテゴリーでは動作しないようですね(バグと思われます)。表示されました。

[2] Posted by yujiro logo : March 18, 2008 1:15 AM

>yujiroさん

検証していただきありがとうございます。
カテゴリを画像表示にしたくて、フィールドを追加したのですが、
各カテゴリに対応した画像というものがでてきません。
1種類のみは表示されるのですが、、
もしよろしければ、どのようなタグで成功したのか教えてください。
よろしくお願いします。

[3] Posted by コスギ : March 21, 2008 9:31 AM

>コスギさん
こんばんは。
曖昧な回答ですいません。
試したのは次のサブテンプレートです(青色が追加部分)

サイドバーのカテゴリーリストに画像を表示

<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で試したところ、表示できないものもありましたので、カスタムフィールド機能に不具合があるのかも知れません。
それではよろしくお願い致します。

[4] Posted by yujiro logo : March 22, 2008 9:37 PM

>yujiroさん

御礼が遅くなりました。
教えていただいた方法で表示できました!
カテゴリを画像表示にすることができて大満足です^^
『CMSとして使うMovable Typeガイドブック』も活用させていただいてます★
今後ともどうぞよろしくお願いします。

[5] Posted by コスギ : March 29, 2008 8:34 PM

>コスギさん
ご連絡ありがとうございました。
無事に表示されたようでよかったです。
拙著もお買い上げくださりありがとうございました!

[6] Posted by yujiro logo : March 31, 2008 12:20 AM

こんにちは、随分前から貴サイトには色々とお世話になっております。

この度、MovableType ver 5.06 にて作成したテンプレートを ver 5.04 にテーマとしてインストールして利用したところ、下記のカスタムフィールドにてアップロードした画像を表示させるテンプレートタグのところでエラーとなり困っております。


■カスタムフィールド名:EntryDataPhoto


<mt:If tag="EntryDataPhoto">
<mt:EntryDataPhotoAsset><img src="<$MTAssetURL$>" /></mt:EntryDataPhotoAsset>
</mt:If>


ver 5.06 では問題なく処理できていますが、ver 5.04 では…

【1】
<mt:If tag="EntryDataPhoto"> を <mt:If tag="EntryDataPhotoAsset"> にしないと「EntryDataPhotoAssetを正しいコンテキストで使用していません。」というエラーが出る。

【2】
<mt:If tag="EntryDataPhotoAsset"> に修正するとエラーは出ないが、<mt:EntryDataPhotoAsset>の中身が存在しない為か、出力されない。


MovableTypeバージョン違いのバグ(5.06では修正された)なのか?それとも別の理由でアイテム関連のAssetデータが取得できないのかが解りません。

<$EntryDataPhoto$>タグで画像へのテキストリンクを出力することはできています。


5.04環境でなんとか、思い通りに表示させる or 確実にバグであると分かるドキュメントが存在すればいいのですが…。
非常に困っております。

このような事象についてご存知であればアドレスいただけませんでしょうか。
宜しくお願いいたします。

[7] Posted by taro_jp : November 21, 2011 5:58 PM

>taro_jpさん
こんにちは。
ご返事遅くなり申し訳ありません。
MT5.04で頂いたテンプレートタグで試してみましたが同様の事象は発生しませんでした(=MTIfタグのname値を「EntryDataPhoto」にして正常に動作しました)。
対処方法は思いつきませんが、別のカスタムフィールドを作って、同様の事象になるのであれば環境依存の問題と思われます。
それではよろしくお願い致します。

[8] Posted by yujiro logo : December 3, 2011 11:27 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)