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

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拍手お返事

関連記事