TopMovable Typeテンプレートタグ > 2009年8月
2009年8月28日

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

August 28,2009 1:55 AM
Tag:[, , , ]
Permalink

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 のマークアップは適宜変更してください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3