hello foo bar Saba note | MovableTypeで記事内のサムネイルを表示する

MovableTypeで記事内のサムネイルを表示する

2016.7.4 (月)

ニュースサイトみたいにトップページにサムネイルとかを表示してリンク先を記事にする方法です。
たいていのCMSはというかだいたい全部のCMSはテキストと画像を分離せざる得ないわけで、MTもまた記事のテキストと投稿した画像を別々で管理してHTML上で合成という手続きをとっているために画像の表示は面倒臭いのです。以下、ブログ記事のサムネイルを表示して、更にサムネイルのリンク先は画像ではなくその記事のページへという仕様になっています。
肝はMTEntriesでぐるぐるループを回して、その中でMTEntryAssetsを更にぐるぐる回す。MTEntryAssetsはMTEntriesにネストされている状態なのでpermalinkを引っ張ってくると記事のリンクになります。

記事内のすべての画像をサムネイル表示する場合

<mt:EntryAssets lastn=”1″…の部分のlastnの値を大きくします。あるいは、lastnそのものを削除します。

記事内の一番最初に載せた写真だけ表示する

lastn=”1″で一回しかループしないようにします。逆に一番最後の画像だけサムネイル表示したい場合はsort_order=”descend”。
n番目の画像を表示する場合は、結構面倒です。 でカウントしているので、この数でもってIF文で分けてあげればよいです。

<div id="sample">
    <mt:SetVar name="cnt" value="0">
    <mt:Entries lastn="100">
        <mt:EntryAssets lastn="1" type="image OR video">
            <mt:If tag="AssetThumbnailURL">
            <mt:SetVar name="cnt" op="++">
                <div class="asset-thumbnail">
                    <a class="asset-image" href="<$mt:EntryPermalink$>">
                        <img src="<$mt:AssetThumbnailURL$>" height="100" class="asset-thumb" alt="<$mt:EntryTitle$>" title="<$mt:EntryTitle$>" />
                    </a>
                </div>
            </mt:If>
        </mt:EntryAssets>
    </mt:Entries>
</div>

MTEntries: http://www.movabletype.jp/documentation/appendices/tags/entries.html
MTEntryAssets: http://www.movabletype.jp/documentation/appendices/tags/entryassets.html