Movable Type のブログ記事に表示する画像のサイズを制御する

Movable Type のブログ記事に表示する画像のサイズを制御する

Posted at August 28,2009 1:55 AM
Tag:[Asset, Customize, Image, MovableType]

Movable Type のブログ記事に挿入した画像の表示サイズを制御するカスタマイズです。

ここでは次のようなサンプルを提供します。

  • 元画像の幅が 200px 以上であれば、200px のサムネイルを表示
  • 元画像の幅が 200px 未満であれば元画像を表示

完成イメージ
表示イメージ

1.基本

画像の幅は MTAssetProperty タグに property="image_width" を与えることで取得できます。ここでは取得した値を変数 width に保存し、MTIf タグで判定します。

元画像の表示は、img 要素の src 属性に MTAssetURL タグを与えます。サムネイル画像の場合は、img 要素の src 属性に MTAssetThumbnailURL タグを与えます。サムネイルは事前に作成する必要はなく、このサブテンプレートが実行された時点で自動的に作成します。

なお、サムネイルを生成するには ImageMagick の利用が必要です。

<mt:SetVar name="size" value="200" />
<mt:Entries>
  <mt:EntryAssets>
    <mt:AssetProperty property="image_width" setvar="width" />
    <mt:If name="width" lt="$size">
<p><img src="<mt:AssetURL />" alt="<mt:AssetFileName />" /></p>
    <mt:Else>
<p><img src="<mt:AssetThumbnailURL width="$size" />" alt="<mt:AssetFileName />" /></p>
    </mt:If>
  </mt:EntryAssets>
</mt:Entries>

2.サムネイルの場合は元画像へのリンクを表示する場合

サムネイルに元画像へのリンクを表示する場合は、1項の MTAssetThumbnailURL タグ(と img 要素)の代わりに、MTAssetThumbnailLink タグを利用します(青色部分)。MTAssetThumbnailLink タグを使わずに、MTAssetThumbnailURL タグと MTAssetURL タグを組み合わせても構いません。

<mt:SetVar name="size" value="200" />
<mt:Entries>
  <mt:EntryAssets>
    <mt:AssetProperty property="image_width" setvar="width" />
    <mt:If name="width" lt="$size">
<p><img src="<mt:AssetURL />" alt="<mt:AssetFileName />" /></p>
    <mt:Else>
<p><mt:AssetThumbnailLink width="$size" alt="<mt:AssetFileName />" /></p>
    </mt:If>
  </mt:EntryAssets>
</mt:Entries>

いずれも、赤字の値を変更すれば、表示する画像の幅を変更できます。また、(X)HTML のマークアップは適宜変更してください。

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


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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