mtde.info

Movable Type Developers Express

縦横比を保持して全ての画像の幅をそろえる

2008年2月12日 22:00 | Writer: apstar | 記事本文

縦横比を保持したまま、全ての画像の幅をそろえるサンプルです。

UserWidth変数へ任意の値（100と代入すれば100pixel）を指定してやると、MTAssetsブロックタグで取得できる全ての画像幅を指定幅にし、同時に縦横比が変わらないように最適な高さを計算してくれます。

また、UserWidth変数へ0を代入すると、オリジナルサイズで画像を表示します。

計算される画像高さは sprintf="%d" モデファイアで整数に直されます。

コード

<MTSetVar name="UserWidth" value="100">
<MTAssets type="image" lastn="10">
  <MTIf name="UserWidth" eq="0">
      <MTSetVarBlock name="ImgW"><MTAssetProperty property="image_width"></MTSetVarBlock>
      <MTSetVarBlock name="ImgH"><MTAssetProperty property="image_height"></MTSetVarBlock>
   <MTElse>
      <MTSetVarBlock name="tmpImgW"><MTAssetProperty property="image_width"></MTSetVarBlock>
      <MTSetVarBlock name="tmpImgH"><MTAssetProperty property="image_height"></MTSetVarBlock>
      <MTSetVarBlock name="ImgH">
         <MTGetVar name="tmpImgW" value="$UserWidth" op="/" setvar="Bairitu">
         <MTGetVar name="tmpImgH" value="$Bairitu" op="/" setvar="AnsImgH">
         <MTGetVar name="AnsImgH" sprintf="%d">
      </MTSetVarBlock>
      <MTSetVarBlock name="ImgW"><MTGetVar name="UserWidth"></MTSetVarBlock>
   </MTIf>
   <img src="<MTAssetURL>" width="<MTGetVar name="ImgW">" height="<MTGetVar name="ImgH">" alt="<MTAssetProperty property="description">">
</MTAssets>

アイテム関連サンプル

2008 mtde.info