読者です 読者をやめる 読者になる 読者になる

purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

アップロードしたカスタムフィールドの画像サイズをリサイズして表示

参考
カスタムフィールドでアップした画像のリサイズに関して - CSS HappyLife
http://css-happylife.com/archives/2010/0323_0105.php

アップロードした画像の縦横を比較して、指定サイズ以内にリサイズする。 - hello, world. http://d.hatena.ne.jp/fujimori1981/20091201/1259651176

仕様

ブログのアイキャッチ画像を表示する為にカスタムフィールドを使う

カスタムフィールドは画像で名前は「imageDataCatche」

f:id:purazumakoi:20140714192839j:plain

処理手順(公開側テンプレート)

  1. 画像がアップされているか?なければ「画像ないです・・・・」メッセージ表示
  2. あれば、横幅と縦幅を取得
  3. 横幅と縦幅を比較して、それぞれタグの属性指定で表示

コード

<a href="<$mt:EntryPermalink encode_html="1"$>">
<div>

<mt:Ignore>画像がアップされていれば</mt:Ignore>
<MTIfNonEmpty tag="imageDataCatche">

 <mt:Ignore>アップされたキャッチ画像の横幅</mt:Ignore>
 <mt:SetVarBlock name="imageDataCatcheWidth">
 <mt:imageDataCatcheAsset><mt:AssetProperty property="image_width"></mt:imageDataCatcheAsset>
 </mt:SetVarBlock>

 <mt:Ignore>アップされたキャッチ画像の縦幅</mt:Ignore>
 <mt:SetVarBlock name="imageDataCatcheHeight">
 <mt:imageDataCatcheAsset><mt:AssetProperty property="image_height"></mt:imageDataCatcheAsset>
 </mt:SetVarBlock>

 <mt:Ignore>横長画像の場合width:240px</mt:Ignore>
 <mt:If name="imageDataCatcheWidth" ge="$imageDataCatcheHeight">
 <span><MTimageDataCatcheAsset><img src="<$mt:AssetThumbnailURL width="240"$>" alt=""></MTimageDataCatcheAsset></span>
 <mt:Else>
 <mt:Ignore>縦長画像の場合height:150px</mt:Ignore>
 <span><MTimageDataCatcheAsset><img src="<$mt:AssetThumbnailURL height="150"$>" alt=""></MTimageDataCatcheAsset></span>
 </mt:Else></mt:If>
             

<MTElse>画像ないです・・・・
</MTIfNonEmpty>

<div>
</a>