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

概要

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

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

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

MTML

<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'で指定したものを吐き出す

参考

  • Facebook
  • Twitter
  • はてなブックマーク

Author

札幌でフロントエンドエンジニアとして働いています。好きな音楽はSIAM SHADE!
SIAM SHADEの六人目のメンバーとして日々ロックを愛し続けている。
HTML,CSS,JavaScriptをベースにCMS構築が得意です。
HAMWORKS社員 https://ham.works