2015年7月10日

画像サムネイルを書き出す方法

カスタムフィールドで画像を指定した際にサムネイルを書き出す方法です。


横幅150pxのサムネイル

<MT:ImageAssets>
<img src="<$MT:AssetThumbnailURL width="150"$>" alt="<$MTEntryTitle$>" />
<MT:ImageAssets>

正方形のサムネイル

<MT:ImageAssets>
<img src="<$MT:AssetThumbnailURL width="90" square="1"$>" alt="<$MT:EentryTitle$>" />
</MT:ImageAssets>

縦か横が100pxのサムネイルを書き出す

<MT:ImageAssets>
<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:ImageAssets>

画像の横幅が500px以下ならそのまま表示
画像の横幅が500px以上なら縮小して表示

<MT:ImageAssets>
<MTSetVarBlock name="imageWidth"><MT:AssetProperty property="image_width"></MT:SetVarBlock>
<MT:If name="imageWidth" gt="500"><MT:SetVar name="imageWidth" value="500"></MT:If>
<img src="<$MT:AssetThumbnailURL width="$imageWidth"$>" alt="<$MT:EntryTitle$>" />
<MT:ImageAssets>


ライトボックスでサムネイル

<MT:ImageAssets>
<a href="<$MT:AssetThumbnailURL$>" rel="lightbox[photo]"><img src="<$MT:AssetThumbnailURL width="90" square="1"$>" alt="<$MT:EentryTitle$>F /></a>
</MT:ImageAssets>
※元画像の横幅(縦幅)を指定したい場合は2行目 href="<$MT:AssetThumbnailURL$>" にwidth(height)を指定する。

0 件のコメント:

コメントを投稿

ドメインって、早い者勝ちですよ!