小粋空間  -  a cheap joke and a play on words site

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

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

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

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

完成イメージ

１．基本

画像の幅は 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>

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

サムネイルに元画像へのリンクを表示する場合は、１項の 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 のマークアップは適宜変更してください。

• 
• Tweet