Movable Typeでサムネイル画像からブログ記事にリンクを貼る

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$>" />
参考サイト
下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事
Comment