TopMovable Typeカスタムフィールド > カスタムフィールドでアップロードした画像をテンプレートタグで表示する
2008年2月15日

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

Posted at February 15,2008 2:55 AM
Category:[カスタムフィールド]
Tag:[, , ]

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>

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

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

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

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

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

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

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

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

[2] Posted by yujiro Author Profile Page : 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 Author Profile Page : March 22, 2008 9:37 PM

>yujiroさん

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

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

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

[6] Posted by yujiro Author Profile Page : March 31, 2008 12:20 AM
コメントする

*必須



太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!