【Movable Type】アセットを出力する際に利用できる便利なタグ
概要
MT(PowerCMS含む、以下同)で、画像やPDFなどのファイルを記事一覧や記事個別ページのカスタムフィールドなどで出力する際に、一緒に利用できる以下のタグについて解説しています。
- MTAssetProperty
- MTAssetThumbnailLink
- MTAssetThumbnailURL
なお、本記事のコード例で表示する画像の情報は以下です。
- アップロード画像URL:
http://localhost/assets/image.jpg
- 画像の名前:サンプル画像
- 画像の横幅:440px
- 画像の縦幅:340px
MTAssetProperty
表示するアセットファイル(PDFや画像、オーディオや動画など)の情報を出力する。
以下の例では、記事のカスタムフィールドで設定した画像(cf_xxx
)の情報を出力しています。
<!-- MTML -->
<mt:If tag="cf_xxx">
<mt:cf_xxxAsset>
<figure>
<img src="<$mt:AssetURL$>" alt="<$mt:AssetLabel$>" width="<$mt:AssetProperty property='image_width'$>" height="<$mt:AssetProperty property='image_height'$>">
</figure>
</mt:cf_xxxAsset>
</mt:If>
<!-- 出力結果 -->
<figure>
<img src="http://localhost/assets/image.jpg" alt="サンプル画像" width="440" height="340">
</figure>
とりあえず覚えておくといいモディファイア
property
このモディファイアの指定は必須。値には以下いずれかを指定する。
file_size
image_width
image_height
label
description
file_size
アイテムのファイルサイズを出力する。
format
モディファイアを追加で指定することで、出力結果を操作できる。format
モディファイアを付与しない場合は、[数値] KB
で出力される(キロバイト / 数値と単位の間に半角スペースが入る)
image_width
この値を指定したアイテムが画像の場合、元画像の横幅を単位なし(数値のみ)で出力する。
image_height
この値を指定したアイテムが画像の場合、元画像の縦幅を単位なし(数値のみ)で出力する。
label
アイテムの「名前」を出力する。MTAssetLabelと挙動は同じ。
<!-- 以下はいずれも同じ出力結果になる -->
<figure>
<img src="<$mt:AssetURL$>" alt="<$mt:AssetLabel$>">
</figure>
<figure>
<img src="<$mt:AssetURL$>" alt="<$mt:AssetProperty property='label'$>">
</figure>
アイテムの「名前」は、管理画面アセット一覧の各アイテム編集画面で変更します。デフォルトではアップロードしたアセットの「ファイル名(拡張子付き)」が設定されています。
description
アイテムの「説明」を出力する。MTAssetDescriptionと挙動は同じ。
<!-- 以下はいずれも同じ出力結果になる -->
<figure>
<img src="<$mt:AssetURL$>">
<figcaption><$mt:AssetDescription$></figcaption>
</figure>
<figure>
<img src="<$mt:AssetURL$>">
<figcaption><$mt:AssetProperty property="description"$></figcaption>
</figure>
アイテムの「説明」は、管理画面アセット一覧の各アイテム編集画面で変更します。
format
property
の値にfile_size"
を指定した場合に、このモディファイアを追加で指定することで出力結果を操作できる。このフォーマットを指定しない場合、初期値のformat="1"
が適用される。
指定する値と出力結果は以下。
-
0
:単位なしバイト数を出力 -
1
:単位ありキロバイト数を出力(数値と単位の間に半角スペースが入る) -
k
:単位なしキロバイト数を出力 -
m
:単位なしメガバイト数を出力
MTAssetThumbnailLink
このタグで出力するアイテムが画像の場合、元画像へのリンク付きサムネイル画像を表示するXHTMLタグを出力する。
モディファイアを指定することで、サイズの調整が可能(出力されるXHTMLタグは変更できない)
以下の例では、記事のカスタムフィールドで設定した画像(cf_xxx
)の情報を出力しています。
<!-- MTML -->
<mt:If tag="cf_xxx">
<mt:cf_xxxAsset>
<figure><$mt:AssetThumbnailLink height="70" square="1"$></figure>
</mt:cf_xxxAsset>
</mt:If>
<!-- 出力結果 -->
<figure><a href="http://localhost/assets/image.jpg"><img src="http://localhost/assets_c/2025/01/image-thumb-70x70-2.jpg" width="70" height="70" alt="" /></a></figure>
とりあえず覚えておくといいモディファイア
いずれの場合も、サムネイル画像は元画像の中心を起点に生成されます。
width
生成される画像のサムネイルの横幅を指定した数値で出力する。単位はpx
。
縦幅は画像の比率を保ち、指定した数値をもとに自動算出される。
height
生成される画像のサムネイルの縦幅を指定した数値で出力する。単位はpx
。
横幅は画像の比率を保ち、指定した数値をもとに自動算出される。
scale
生成される画像のサムネイルを、元画像から指定した数値縮小して出力する。単位は%
。
square
値に1
を指定することで、生成される画像のサムネイルをwidth
やheight
、scale
で指定した値を基準として、1:1
の正方形で出力する。
force
値に1
を指定することで、生成される画像のサムネイルでwidth
やheight
、scale
で指定した値が元画像より大きい場合にも、指定した値で出力する。
force="1"
の指定がなければ、元画像のサイズで出力される。
MTAssetThumbnailURL
このタグで出力するアイテムが画像の場合、サムネイル画像のURLを出力する。
モディファイアを指定することで、サイズの調整が可能。
以下の例では、記事のカスタムフィールドで設定した画像(cf_xxx
)の情報を出力しています。
<!-- MTML -->
<mt:If tag="cf_xxx">
<mt:cf_xxxAsset>
<p><$mt:AssetThumbnailURL height="70" square="1"$></p>
</mt:cf_xxxAsset>
</mt:If>
<!-- 出力結果 -->
<p>http://localhost/assets_c/2025/01/image-thumb-70x70-2.jpg</p>
指定できるモディファイアと出力の挙動はMTAssetThumbnailLink
と同じため、説明は割愛します。
公式リファレンス
MT
- https://www.movabletype.jp/documentation/appendices/tags/assetproperty.html
- https://www.movabletype.jp/documentation/appendices/tags/assetthumbnaillink.html
- https://www.movabletype.jp/documentation/appendices/tags/assetthumbnailurl.html
Discussion