この記事は最終更新日から12年経過しています。内容が古い可能性があります。
MovableTypeでブログ記事内の画像をサムネイルとして表示し、リンク先がその記事になるようにする方法です。
やりたいこと
- ブログ記事内の最初に出てくる画像1つをサムネイルとして表示
- サムネイルは正方形に切り抜きたい
- サムネイルに記事へのリンクを貼る
- ブログ記事内に画像を使用していない場合はNoImage画像を表示する
こんなコードにしてみました
最初はMTAssetThumbnailURLタグを使うつもりで調べていたんですが、最終的にはMTEntryAssetsタグとMTAssetThumbnailLinkタグを使うことにしました。
とりあえず以下のコードで思った通りの動きをしてます。
<mt:SetVarBlock name="img"><MTEntryAssets type="image">image</MTEntryAssets></MTSetVarBlock>
<mt:If name="img" like="image">
<MTEntryAssets type="image" lastn="1" sort_order="ascend">
<a href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle$>" rel="bookmark"><$MTAssetThumbnailLink width="200" square="1" sanitize="img src" replace="/>",""$>title="<$mt:EntryTitle$>" alt="<$mt:EntryTitle$>" /></a>
</MTEntryAssets>
<mt:Else>
<a href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle$>" rel="bookmark"><img src="img/no_image.gif" title="<$mt:EntryTitle$>" alt="<$mt:EntryTitle$>" /></a>
</mt:If>解説
SetVarBlockタグでエントリー内に画像があるかないかを判断しています。
<mt:SetVarBlock name="img"><MTEntryAssets type="image">image</MTEntryAssets></MTSetVarBlock>
<mt:If name="img" like="image">
エントリー内に画像がある場合
<mt:Else>
エントリー内に画像がない場合
</mt:If>MTEntryAssetsタグで、エントリー内で利用している一番最初の画像を表示します。
<MTEntryAssets type="image" lastn="1" sort_order="ascend">
…
</MTEntryAssets>MTAssetThumbnailLinkタグでは、画像へのリンクやalt属性が出力されてしまいますが、sanitizeモディファイアで画像URLのみ出力されるように指定しています。
imgタグの閉じタグ部分は置換で消して、エントリータイトルをtitle属性とalt属性に設定しています。
<$MTAssetThumbnailLink width="200" square="1" sanitize="img src" replace="/>",""$>title="<$mt:EntryTitle$>" alt="<$mt:EntryTitle$>" />
コメント