movable-type
MovableTypeのthumbnail表示について
最終更新日: 2023年4月15日
thumbnail表示について、画像の縦横比に応じて入れ子にフィットする必要に駆られたことから作成したコード。
入れ子が定型でエントリーの画像が縦横一定でなく、かつアスペクト比が一定でない場合oerflow:hidden;として見切るにしても入れ子に100%表示させる。
併せてMT3xからのエントリーなどで、画像がAssetとして登録されていない場合の画像抽出を含めて作成。
<mt:SetVarBlock name="img_count"><mt:EntryAssets type="image"><mt:AssetCount></mt:EntryAssets></mt:SetVarBlock>
<mt:If name="img_count" lt="1">
<a href="<MTEntryPermalink>">
<img<mt:EntryImages lastn="1"><mt:SetVarBlock name="width"><$mt:EntryImageWidth$></mt:SetVarblock><mt:SetVarBlock name="height"><$mt:EntryImageHeight$></mt:SetVarblock></mt:EntryImages><mt:If name="width" ge="$height"> height="100%" <mt:Else> width="100%" </mt:Else></mt:If> src="<mt:EntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g',''>" alt="<mt:EntryTitle>" />
</a>
<mt:Else><mt:Ignore>画像がAssetとしてある場合</mt:Ignore>
<a href="<MTEntryPermalink>">
<img<mt:EntryAssets lastn="1"><mt:SetVarBlock name="width"><$mt:AssetProperty property="image_width"$></mt:SetVarblock><mt:SetVarBlock name="height"><$mt:AssetProperty property="image_height"$></mt:SetVarblock></mt:EntryAssets><mt:If name="width" ge="$height"> height="100%" <mt:Else> width="100%" </mt:Else></mt:If> src="<mt:EntryAssets lastn="1"><$MTAssetThumbnailURL$></mt:EntryAssets>" alt="<mt:EntryTitle>" />
</a>
</mt:If>