Movable Typeでサムネイルサイズを指定して取得する

2018.08.26

記事で登録したサムネイル画像を、指定したサイズで取得する方法を試してみました。
バージョンは6.0.8を使用しています。

サンプルコード

今回は以下のような画像でサイズ設定を試してみます。

tent.jpg(640px × 426px)

まずはオリジナルサイズで取得してみます。

<mt:EntryAssets type="image" limit="1">
  <$mt:AssetURL$>
<mt:Else>
  <span>noimage</span>
</mt:EntryAssets>

オリジナルサイズのURLはMTAssetURLで取得できます。
MTEntryAssetsにtype="image"を付けて記事で使用している画像を取得、MTElseで画像が無かった場合も設定できます。
以下の画像を取得できました。

tent.jpg(640px × 426px)

サムネイル画像を取得してみます。

<mt:EntryAssets type="image" limit="1">
  <$mt:AssetThumbnailURL$>
</mt:EntryAssets>

サムネイル画像のURLはMTAssetThumbnailURLで取得できます。
ファイル名はオリジナルから変更されていますが、特にサイズの設定をしていないのでサイズはオリジナルのままです。

tent-thumb-640×426-11.jpg(640px × 426px)

MTAssetThumbnailURLにwidthを指定してみます。

<mt:EntryAssets type="image" limit="1">
  <$mt:AssetThumbnailURL width="320"$>
</mt:EntryAssets>

幅320pxで縦横比を維持した画像が生成できました。

tent-thumb-320xauto-11.jpg(320px × 213px)

MTAssetThumbnailURLにheightを指定してみます。

<mt:EntryAssets type="image" limit="1">
  <$mt:AssetThumbnailURL height="100"$>
</mt:EntryAssets>

高さ100pxで縦横比を維持した画像が生成できました。

tent-thumb-autox100-11.jpg(150px × 100px)

widthとheightを指定してみます。

<mt:EntryAssets type="image" limit="1">
  <$mt:AssetThumbnailURL width="320" height="100"$>
</mt:EntryAssets>

widthとheightを合わせて指定した場合、オリジナルサイズの長辺の指定が適用され、短辺が縦横比を維持した画像を生成します。
今回の場合はwidthが適用され、ファイル名もwidthのみを指定した時と同じファイル名になりました。

tent-thumb-320xauto-11.jpg(320px × 213px)

scaleを指定してみます。

<mt:EntryAssets type="image" limit="1">
  <$mt:AssetThumbnailURL scale="25"$>
</mt:EntryAssets>

オリジナルサイズから指定した値(%)だけ縮小した画像が生成できました。

tent-thumb-160×106-11.jpg(160px × 106px)

squareに1を設定すると、正方形のサムネイルを生成します。

<mt:EntryAssets type="image" limit="1">
  <$mt:AssetThumbnailURL width="100" square="1"$>
</mt:EntryAssets>

100px四方の正方形の画像を生成できました。

tent-thumb-100×100-11.jpg(100px × 100px)

【参考サイト】