アップロードしたカスタムフィールドの画像サイズをリサイズして表示
参考
カスタムフィールドでアップした画像のリサイズに関して - CSS HappyLife
http://css-happylife.com/archives/2010/0323_0105.php
アップロードした画像の縦横を比較して、指定サイズ以内にリサイズする。 - hello, world. http://d.hatena.ne.jp/fujimori1981/20091201/1259651176
仕様
ブログのアイキャッチ画像を表示する為にカスタムフィールドを使う
カスタムフィールドは画像で名前は「imageDataCatche」
処理手順(公開側テンプレート)
- 画像がアップされているか?なければ「画像ないです・・・・」メッセージ表示
- あれば、横幅と縦幅を取得
- 横幅と縦幅を比較して、それぞれタグの属性指定で表示
コード
<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>