Movable Typeの画像にaltを設定する

Movable Typeのカスタムフィールドで登録した画像を出力する際、画像にaltを設定する方法をメモ。

設定方法

例として、以下のようなカスタムフィールドを作成します。

• 名前：画像
• 種類：画像
• ベースネーム：img
• テンプレートタグ：EntryDataImg

実際に画像を登録してみます。
画像をアップロードする際、アップロード後に編集を行うことができます。

編集をクリックすると、画像に対して名前や説明文を設定することができます。
今回は説明文ををaltとして使う想定で、「altテスト」と入力してみます。

実際に登録した画像の出力を試してみます。
まずはオリジナル画像へのリンク付きのimgタグを出力するMTAssetThumbnailLinkを試してみます。

<mt:EntryDataImgAsset>
<$MTAssetThumbnailLink width="500"$>
</mt:EntryDataImgAsset>

結果は以下のような形で出力されましたが、alt属性は設定されていません。

<a href="http://example.com/xxxxx.png"><img src="http://example.com/assets_c/2025/03/xxxxx-thumb-500xauto-59.png" width="500" height="286" alt=""></a>

次に画像URLを取得した上で、自分でimgタグを用意する方法です。

<mt:EntryDataImgAsset>
<img src="<$MTAssetURL$>" alt="<$MTAssetDescription$>">
</mt:EntryDataImgAsset>

アセットの説明で入力した値は、MTAssetDescriptionで取得できます。
これで説明をaltに設定することができました。

<img src="http://example.com/xxxxx.png" alt="altテスト">

アセットの説明でなく名前を使いたい場合、以下で出力できます。

<mt:EntryDataImgAsset>
<$MTAssetLabel$>
</mt:EntryDataImgAsset>

ただし、名前部分は初期値でファイル名が入っているため、設定を行わない場合altにファイル名が入るようになるので注意が必要です。