このページの位置: ホーム > blogっぷり! > 石輪っぷり! > MovableType > MT で生成したサムネイルの幅または高さを取得する

石輪っぷり!

MT で生成したサムネイルの幅または高さを取得する

[MovableType] 2010年6月23日 22時35分

＃blogっぷり！の中で志向の異なる技術ネタw

Movable Type で画像のサムネイルを生成する場合、元画像へのリンク付きで表示する <$mt:AssetThumbnailLink$> を使う方法と、
サムネイルの URL を表示する <$mt:AssetThumbnailURL$> を使う方法とがあります。

前者の場合、
<$mt:AssetThumbnailLink width="100"$>
とすれば、
<a href="(元画像のURL)"><img src="(生成したサムネイルのURL)" width="100" height="75" alt="" /></a>
という具合に高さ（<$mt:AssetThumbnailLink$> で高さを指定した場合は幅）を自動計算してソースに表示してくれます。

しかし、後者の場合は
<$mt:AssetThumbnailURL width="100"$>
としても、単にサムネイルの URL を表示するだけなので、
<img src="<$mt:AssetThumbnailURL width="100"$>" width="100" alt="" />
って感じで、サムネイルの幅を指定した場合は高さが、高さを指定した場合は幅がわからず、ソースに表示できません。

でも、例えばクライアント側にリサイズのスキルがない場合や、画像からパーマリンクへのリンクを貼る場合など、<$mt:AssetThumbnailURL$> を使って、元画像へのリンクを作らずに縮小した画像を表示したいという場合もあります。
このとき、img 要素は、幅（width）や高さ（height）が無くてもエラーにはなりませんが、ネット回線が遅い場合などでは、幅や高さの指定が無いと画像が表示されるまでレイアウトがずれてしまう結果となります。

そこで、<$mt:AssetThumbnailURL$> を使った場合でも、幅あるいは高さを表示できるように考えてみました。

元画像の幅を「W」、高さを「H」、サムネイルの幅を「w」、高さを「h」とすると、「W : H = w : h」ですので、幅を指定して生成されたサムネイルの高さを求める計算式は、「h = H / W × w」ですね。
これを Movable Type の変数処理で計算させます。

まず、<mt:Assets> または <mt:(custom field template tag name)Asset> の中で元画像の幅と高さを取得します。

<mt:SetVarBlock name="photo_width"><$mt:AssetProperty property="image_width"$></mt:SetVarBlock>
<mt:SetVarBlock name="photo_height"><$mt:AssetProperty property="image_height"$></mt:SetVarBlock>

続いて、サムネイルの高さを求める計算。（サムネイルの幅を 100pixel とした場合）

<mt:SetVar name="photo_height" op="/" value="$photo_width">
<mt:SetVar name="photo_height" op="*" value="100">

これを、<$mt:AssetThumbnailURL$> でサムネイルを生成する img 要素の hieght 属性の値に入れると、

<img src="<$mt:AssetThumbnailURL width="100"$>" width="100" height="<$mt:Var name="photo_height"$>" alt="" />

ですが、先の計算結果によっては小数点以下が続く場合がありますので、次のようにします。

<img src="<$mt:AssetThumbnailURL width="100"$>" width="100" height="<$mt:Var name="photo_height" op="+" value="0.5" sprintf="%d"$>" alt="" />

op="+" value="0.5" sprintf="%d" は、四捨五入するための記述です。値に 0.5 を足して整数部分を取り出しています。
※四捨五入の方法は「MT4.2:テンプレートタグのみで切り捨て，切り上げ，四捨五入の演算（Under the Bridge）」を参考にさせていただきました。

これを、横長の画像と縦長の画像の両方に対応し、長い方の辺を 100pixel としたサムネイルを生成する場合で纏めると、以下のようになります。

<mt:Assets> or <mt:(custom field template tag name)Asset>
<mt:SetVarBlock name="photo_width"><$mt:AssetProperty property="image_width"$></mt:SetVarBlock>
<mt:SetVarBlock name="photo_height"><$mt:AssetProperty property="image_height"$></mt:SetVarBlock>
<mt:If name="photo_width" gt="$photo_height"$>
    <mt:SetVar name="photo_height" op="/" value="$photo_width">
    <mt:SetVar name="photo_height" op="*" value="100">
    <img src="<$mt:AssetThumbnailURL width="100"$>" width="100" height="<$mt:Var name="photo_height" op="+" value="0.5" sprintf="%d"$>" alt="" />
<mt:Else>
    <mt:SetVar name="photo_width" op="/" value="$photo_height">
    <mt:SetVar name="photo_width" op="*" value="100">
    <img src="<$mt:AssetThumbnailURL height="100"$>" width="<$mt:Var name="photo_width" op="+" value="0.5" sprintf="%d"$>" height="100" alt="" />
</mt:If>
</mt:Assets> or </mt:(custom field template tag name)Asset>

強制的に幅または高さを指定してもよいですが、最近は写真のサイズが必ずしも 6 : 4 ではありませんので、場合によっては画像が歪んでしまいます。デザイン的にその方がきれいな場合もありますが。

タグ:

コメント(0) | トラックバック(0)

トラックバック(0)

このブログ記事のトラックバックURL:

コメントする

« 前の記事: 無料で高品質な PDF 作成ソフト
次の記事 »: 「納期」

カレンダー

2010年6月
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30