Movable Type でサムネイル画像のサイズを取得する

Movable Type で幅(または高さ)を指定してサムネイル画像を生成する場合、もう一方のサイズは自動的に決まります。

これまで状況に応じて JavaScript や PHP で取得していたため、あまり気にしていなかったのですが。。。
テンプレートの内部処理で取得する必要に迫られ、改めて考えてみました。

MTAssetThumbnailLink の出力値から取得する場合

この方法は、Qiita の記事を参考にしました。

MovableTypeでサムネイル画像の横幅と高さの値を取得する方法 - Qiita:
http://qiita.com/redamoon/items/0c9cbcf18499b64a20c8

サンプルでは MTAsset を利用しつつ、幅を指定してサムネイル画像を生成するため、あらかじめ変数として定義しておきます。

<mt:SetVar name="asset_id" value="1" />
<mt:SetVar name="thumb_width" value="240" />

次に、MTAssetThumbnailLink の img タグを regex_replace モディファイアを利用して、変数(thumb_img)にセットします。

<mt:Asset id="$asset_id">
  <mt:AssetThumbnailLink width="$thumb_width" regex_replace='/<a.*?>(.*)</a>/','$1' setvar="thumb_img" />
</mt:Asset>

同様に、変数(thumb_img)から src と height の属性値をそれぞれ抜き出して、変数にセットします。

<mt:Var name="thumb_img" regex_replace='/<img src="(.*)" .*?>/','$1' setvar="thumb_src" />
<mt:Var name="thumb_img" regex_replace='/<img.*? height="(\d+)" .*?>/','$1' setvar="thumb_height" />

出力の際は、MTVar などで任意の変数を指定します。

src    = <mt:Var name="thumb_src" /><br>
width  = <mt:Var name="thumb_width" /><br>
height = <mt:Var name="thumb_height" />

MTAssetThumbnailLink の出力値から取得する場合のサンプルコード

<mt:SetVar name="asset_id" value="1" />
<mt:SetVar name="thumb_width" value="240" />

<mt:Asset id="$asset_id">
  <mt:AssetThumbnailLink width="$thumb_width" regex_replace='/<a.*?>(.*)</a>/','$1' setvar="thumb_img" />
</mt:Asset>

<mt:Var name="thumb_img" regex_replace='/<img src="(.*)" .*?>/','$1' setvar="thumb_src" />
<mt:Var name="thumb_img" regex_replace='/<img.*? height="(\d+)" .*?>/','$1' setvar="thumb_height" />

src    = <mt:Var name="thumb_src" /><br>
width  = <mt:Var name="thumb_width" /><br>
height = <mt:Var name="thumb_height" />

元画像のサイズから計算する場合

折角なので、自分で計算する方法も考えてみました。
はじめに、MTAsset でサムネイル画像のURL・元画像の幅と高さを変数にセットします。

<mt:Asset id="$asset_id">
  <mt:AssetThumbnailURL width="$thumb_width" setvar="thumb_src" />
  <mt:AssetProperty property="image_width" setvar="img_width" />
  <mt:AssetProperty property="image_height" setvar="img_height" />
</mt:Asset>

次に「サムネイル画像の幅 * 元画像の高さ / 元画像の幅」を求めます。

<mt:Var name="img_height" op="*" value="$thumb_width" setvar="thumb_height" />
<mt:Var name="thumb_height" op="/" value="$img_width" setvar="thumb_height" />

このままだと整数にならないため、Movable Type 6.1 の php/lib/thumbnail_lib.php の205行目あたりを参考に、小数点以下を切り捨てます。

<mt:Var name="thumb_height" regex_replace="/\.\d+$/","" setvar="thumb_height" />

元画像のサイズから計算する場合のサンプルコード

<mt:SetVar name="asset_id" value="1" />
<mt:SetVar name="thumb_width" value="240" />

<mt:Asset id="$asset_id">
  <mt:AssetThumbnailURL width="$thumb_width" setvar="thumb_src" />
  <mt:AssetProperty property="image_width" setvar="img_width" />
  <mt:AssetProperty property="image_height" setvar="img_height" />
</mt:Asset>

<mt:Var name="img_height" op="*" value="$thumb_width" setvar="thumb_height" />
<mt:Var name="thumb_height" op="/" value="$img_width" setvar="thumb_height" />
<mt:Var name="thumb_height" regex_replace="/\.\d+$/","" setvar="thumb_height" />

src    = <mt:Var name="thumb_src" /><br>
width  = <mt:Var name="thumb_width" /><br>
height = <mt:Var name="thumb_height" />

やってみて

MT が生成するサムネイル画像の「auto」に該当する値は、(勘違いでなければ)小数点以下を切り捨てているのですね。

てっきり ceil あたりで丸めてるのだろう・・・と思ってました。

comments powered by Disqus