Home > Internet > Movabletype > AssetThumbnailURLの指定・・・

AssetThumbnailURLの指定・・・

Posted by: oscar
2011-09-18 (日) 19:46
MovableType
ImageCropper, MT, MT5.1, thumbnail, アイテム
delicious count
hatebu user
AssetThumbnailURLの指定・・・

Long Long Time Ago Far Far Away...
という訳ではないですけれど、まぁかなり昔に目についた話・・・
「104130: AssetThumbnailURL only processes one dimension at a time - FogBugz」

MTAssetThumbnailURLに「width」と「height」を指定したら、オリジナルサイズの画像が戻ってきたとかいう話っぽいです。
で、そもそも「width」と「height」を同時にしてみたらどうなるかというのが、今回の話。
すでに、「MTAssetThumbnailURL | テンプレートタグリファレンス」も書きなおされているので、そこを見るのが早いけど、要はオリジナル画像のサイズも関係するということらしいです。
あくまでも「MTAssetThumbnailURL」では縦横比は変更されない訳です。

で、ここで昨日のチョットばかり続き。
「Image Cropper」の登場。
Image Cropperで切り取るサイズは指定出来るんだけど、全部の画像に切り取り作業やるのは面倒だから、大半は自動生成にしちゃうとかいった場合に、画像が揃わなくなるんですねぇ。当たり前といえば当たり前。

オリジナル「endevver/mt-plugin-imagecropper - GitHub」のサンプルコード

<mt:Asset id="136">
  <mt:CroppedAsset label="Square">
    <img src="<$mt:AssetURL$>" width="100" height="100" />
  <mt:Else>
    <img src="<$mt:AssetThumbnailURL square="1" width="100"$>" />
  </mt:CroppedAsset>
</mt:Asset>

正方の例を使ってごまかしているけど、まぁ破錠するのはよく見なくても予想可能。
なら、サイズ指定でトリミングするタグを追加すればいいじゃないかというのが結論。
という訳で、苦労しつつ以下のタグを追加しました。

<$mt:ScaleThumbnailURL$>: widthとheightで指定された領域に内接するように縮小された画像のURLを返す
<$mt:FillThumbnailURL$>: widthとheightで指定された領域に外接するように縮小された画像のURLを返す
<$mt:CropThumbnailURL$>: widthとheightで指定された領域に外接する縮小画像の、はみ出し分を切り取った画像のURLを返す
<$mt:PrototypeVar$>: Image Cropperで定義したカスタムひな形の値を返す

コレを使って以下のようにすると、全てのサイズが揃うわけです。

<mt:Asset id="136">
  <mt:CroppedAsset label="Square">
    <img src="<$mt:AssetURL$>" width="<$mt:AssetProperty property="image_width"$>" height="<$mt:AssetProperty property="image_height"$>" />
  <mt:Else>
    <mt:PrototypeVar label="Square" property="max_width" setvar="width" />
    <mt:PrototypeVar label="Square" property="max_height" setvar="height" />
    <img src="<$mt:CropThumbnailURL width="$width" height="$height"$>" width="<$mt:Var name="width"$>" height="<$mt:Var name="height"$>" />
  </mt:CroppedAsset>
</mt:Asset>

CropThumbnailURLの切り取る位置ですが、デフォルトでは上からになってます。（左右は中央です）
最初は全て中央のつもりでしたが、意外と（特に人物）写真って、アタマから流すようなトリミングになっていて、上から切り取った方が良い結果が得られることが多かったです。

それで、もし位置が気に入らない場合は「align_x」と「align_y」というモディファイアで指定が出来るようになっています。

PrototypeVarについては、テーマに記述した値の取得が出来ていません。registryで設定した値をタグ内で取得する方法を調査中。また、themeの場合って管理画面でロードする時に取得されるので、そこら辺も難しい・・・
そういえば、アイテム登録もしてないけど、それはそのうち・・・
でも、それなりに結果は出たので、今日は満足。