Movable Typeではエントリー中のアイテムをブログ記事のアーカイブ以外でも（要するにどこでも）表示することができます。例えば新しく投稿したエントリーの紹介と同時にサムネイルを表示したり、あるいはサムネイルとタイトルのみで表示したりすることができます。オムニオ・ラボのトップページでも使用しているので見てみてください。サムネイルをクリックするとその画像が使用されているエントリーにアクセスできます。
次にエントリー中の画像（アイテム）を表示させるために<mt:EntryAssets></mt:EntryAssets>を入れ子にして挿入します。(*2)
さてここまできて最後に画像（または動画）そのものを表示させるわけですが、<$mt:AssetThumbnailURL$>タグを使用します。あらかじめ作成したサムネイルを表示するわけですが、たぶんサムネイルのサイズもバラバラだと思います。ですので、<img src="">内で強制的に大きさを加工してやります(*3)。ここでは縦のサイズを100にしているので横に並べると大きさが整って綺麗です。
サムネイルをクリックすると本物の大きさの画像を表示したいという場合はリンクで<$mt:AssetURL$>を指定します。アップロード済みの大きな画像にリンクすることができます。しかし、ここではその画像を扱っているエントリーそのものにアクセスします。ですので<$mt:EntryPermalink$>をリンク先としています。
しかしここで問題が。エントリーが扱うアイテムを表示するので、もしエントリー中に画像がない場合は当然画像は表示されないのでスキップすることになります。ですから上記のコードですと「画像の表示数が決められない」ということになってしまいます。デザイン上もよろしくないし、大量に表示するというのもセンスがよくない。そこである程度決まった数にアイテムの表示を制御してやります。
まずは変数をセットします。単純に一つの変数を設定するので<mt:SetVar name="変数名" value="値">という風にセットします。(*1)それから「もしアイテムのサムネイル（のURL）が存在したら...」という条件を設定し(*2)、条件が成立したら先の変数に1を加算してやります。いわゆるオートインクリメントというやつです。このまま続けてループを繰り返すのでアイテムが表示される度に数が1つずつ増えてゆきます(*3)。最終的にその指定した変数(cnt)が16以上になったところでループを停止させます(*4)。とりあえずこれで16個のアイテムを常時表示することができます。
しかし勿論のことですが、100あるエントリーのうちアイテムが16個以内であれば16個に届かない状態でサムネイルが表示されることになります。
<mt:Entries lastn="100"> (*1)こんな感じです。順番に解説すると、まず<mt:Entries></mt:Entries>ブロックタグでエントリーを表示します(*1)。ブロックタグなのでいわゆるループです。ここではlastn属性で（lastnモディファイアと本当は言います。）100を指定しているので100個のエントリーを表示することになります。
<mt:EntryAssets lastn="1" type="image OR video"> (*2)
<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$>" /> (*3)
</a>
</div>
</mt:EntryAssets>
</mt:Entries>
次にエントリー中の画像（アイテム）を表示させるために<mt:EntryAssets></mt:EntryAssets>を入れ子にして挿入します。(*2)
<mt:Entries>という構成になっています。このネストの構造はMTタグもその他のプログラム言語と同様です。<mt:EntryAssets>は画像やビデオを表示させるタグなのでtypeを指定します。画像だけの場合はtype="image"、動画の場合はtype="video"です。ORの理論和でもって両方を表示させることもできます。ここでlastn属性（モディファイアというらしい...しつこい）では「一つのエントリー中の画像を何枚表示するか？」ということになります。一つのエントリーに複数の画像（または大量の画像）を投稿しているか、または一つのエントリーに対して代表的なもの一つでよいのかどうかということです。ここではlastn="1でもって代表的なものを一つだけ表示させています。(*2)
<mt:EntryAssets type="image OR video">
...
</mt:EntryAssets>
</mt:Entries>
さてここまできて最後に画像（または動画）そのものを表示させるわけですが、<$mt:AssetThumbnailURL$>タグを使用します。あらかじめ作成したサムネイルを表示するわけですが、たぶんサムネイルのサイズもバラバラだと思います。ですので、<img src="">内で強制的に大きさを加工してやります(*3)。ここでは縦のサイズを100にしているので横に並べると大きさが整って綺麗です。
サムネイルをクリックすると本物の大きさの画像を表示したいという場合はリンクで<$mt:AssetURL$>を指定します。アップロード済みの大きな画像にリンクすることができます。しかし、ここではその画像を扱っているエントリーそのものにアクセスします。ですので<$mt:EntryPermalink$>をリンク先としています。
しかしここで問題が。エントリーが扱うアイテムを表示するので、もしエントリー中に画像がない場合は当然画像は表示されないのでスキップすることになります。ですから上記のコードですと「画像の表示数が決められない」ということになってしまいます。デザイン上もよろしくないし、大量に表示するというのもセンスがよくない。そこである程度決まった数にアイテムの表示を制御してやります。
<mt:SetVar name="cnt" value="0"> (*1)Movable Typeには変数なんかも扱えるタグがあってスカラー、配列、ハッシュともうすでに普通のプログラム言語並になっています。文法がシェルによく似ている感じがしないでもないのですが、正直使いにくいです。しかし今回のようにどうしても何らかの制御を施さないと具合が悪いという際にには仕方がありません。
<mt:Entries lastn="100">
<mt:EntryAssets lastn="1" type="image OR video">
<mt:If tag="AssetThumbnailURL"> (*2)
<mt:SetVar name="cnt" op="++"> (*3)
<mt:If name="cnt" le="16"> (*4)
<a class="asset-image" href="<$mt:EntryPermalink$>">
<img src="<$mt:AssetThumbnailURL$>" height="100" class="asset-thumb" alt="<$mt:EntryTitle$>" title="<$mt:EntryTitle$>" />
</a>
</mt:If>
</mt:If>
</mt:EntryAssets>
</mt:Entries>
まずは変数をセットします。単純に一つの変数を設定するので<mt:SetVar name="変数名" value="値">という風にセットします。(*1)それから「もしアイテムのサムネイル（のURL）が存在したら...」という条件を設定し(*2)、条件が成立したら先の変数に1を加算してやります。いわゆるオートインクリメントというやつです。このまま続けてループを繰り返すのでアイテムが表示される度に数が1つずつ増えてゆきます(*3)。最終的にその指定した変数(cnt)が16以上になったところでループを停止させます(*4)。とりあえずこれで16個のアイテムを常時表示することができます。
しかし勿論のことですが、100あるエントリーのうちアイテムが16個以内であれば16個に届かない状態でサムネイルが表示されることになります。
