📃

【Movable Type】アセットを出力する際に利用できる便利なタグ

2025/01/21に公開

概要

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:単位なしメガバイト数を出力

このタグで出力するアイテムが画像の場合、元画像へのリンク付きサムネイル画像を表示する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を指定することで、生成される画像のサムネイルをwidthheightscaleで指定した値を基準として、1:1の正方形で出力する。

force

値に1を指定することで、生成される画像のサムネイルでwidthheightscaleで指定した値が元画像より大きい場合にも、指定した値で出力する。
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

PowerCMS

Discussion