Help us understand the problem. What is going on with this article?

MovableTypeでサムネイル画像の横幅と高さの値を取得する方法

More than 5 years have passed since last update.

概要

カスタムフィールドでアップロードした画像の横幅と高さを取得する方法。

<img src="サムネイル画像パス" width="横幅" height="高さ" alt="記事タイトル名" />

アップロードした画像がユニークな場合、横幅と高さを自動で取得しHTML側で出すという仕組みです。
<$MTAssetThumbnailURL$>でサムネイル画像を取得することはできますが、これだけでは横幅や高さを取得することができません。
今回は、<$MTAssetThumbnailLink$>で対応することができました。
高さを揃えるJSなど、どうしても画像に値を入れたい場合は有効な手法でした。

ソース

<dt>
<mt:SetVarBlock name="alternate">alt="<mt:EntryTitle encode_html="1" />" class="fade"</mt:SetVarBlock>
    <mt:if tag="EntryThumbnail">
        <mt:EntryThumbnailAsset><a href="<mt:EntryLink />"><$mt:AssetThumbnailLink width='180' regex_replace='/<a.*?>(.*)</a>/','$1' regex_replace='/alt=""/','$alternate'$></a></mt:EntryThumbnailAsset>
    <mt:else>
        <a href="<mt:EntryLink />"><img src="それ以外だった場合の画像" alt="<mt:EntryTitle encode_html="1" />" class="fade" width='180' height="180" /></a>
    </mt:if>
</dt>

解説

・MTSetVar変数にaltの名前を挿入
mt:EntryThumbnailAssetでサムネイル画像パスと高さと横幅を取得
・regex_replace=に自動で入るものを取り除く
・'$alternate'で指定したものを吐き出す

参考

テンプレートリファレンス
MovableType サムネイルにもwidthとheight両方入れたいんだってばよ!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away