エントリー内の画像をリストアップするプラグイン(その7)

「エントリー内の画像をリストアップするプラグイン」を使って、以下のようなことを行いたいというご要望がありました。

各カテゴリーから1件ずつ画像を取り出し、表組みにして表示したい。

このプラグインだけでは、カテゴリーをまたがって表組みにすることはできません。
しかし、拙作のVarHandlerプラグインを組み合わせればできますので、その例を紹介します。

1.考え方

カテゴリーをまたがって表組みにする場合、「変数」を利用して列の番号を管理するようにします。

例えば、3列の表組みにしたい場合、以下のように処理するようにします。

1.列の番号が1の時は、行の先頭なので、<tr>タグを出力する
2.画像を1つ出力する
3.列の番号が3の時は、行の最後なので、</tr>タグを出力する
4.列の番号を１つ増やし、その値が4になったら行が変わったことになるので、列の番号を1に戻す

また、カテゴリーの数によっては、行の途中（1列目や2列目）で表の出力が終わってしまい、表の最後の行で行末の</tr>タグが出力されません。
例えば、カテゴリーが7個の場合、1行目と2行目に3カテゴリーずつ出力され、3行目に1カテゴリーだけ出力されて、あと2列が出力されません。
そこで、各カテゴリーの画像を出力し終わったら、行の途中で出力が止まっているかどうかを判断して、空白のセルと、行末の<tr>タグを出力するようにします。

2.例

上記の話に基づいて、3列の表組みにする例を作ってみました。
「col_count」という変数を使って、列の番号を管理しています。
なお、前述したように、この例ではVarHandlerプラグインで拡張したタグを使っていますので、このプラグインもインストールする必要があります。

<MTSetVar name="col_count" value="1">
<table class="image-list" cellspacing="0" cellpadding="0">
<MTSubCategories>
<MTEntriesIfHaveImages>
   <MTIfNumVar name="col_count" value="1"><tr></MTIfNumVar>
   <MTEntryImages img_lastn="1">
      <td>
         <table>
            <tr>
               <td class="image-list-item"><a href="<$MTEntryImageSrc regex="s/(.*)-thumb\.(.*)/$1.$2/"$>" target="_blank"><img src="<$MTEntryImageSrc$>" width="<$MTEntryImageWidth cell_size="120,90"$>" height="<$MTEntryImageHeight cell_size="120,90"$>" alt="<$MTEntryImageAlt$>" /></a></td>
            </tr>
            <tr>
               <td><MTEntryImageEntry><a href="<$MTEntryPermalink$>"><$MTCategoryLabel$>：<$MTEntryTitle$></a></MTEntryImageEntry></td>
            </tr>
         </table>
      </td>
   </MTEntryImages>
   <MTIfNumVar name="col_count" value="3"></tr></MTIfNumVar>
   <MTAddVar name="col_count" value="1">
   <MTIfNumVar name="col_count" value="4"><MTSetVar name="col_count" value="1"></MTIfNumVar>
</MTEntriesIfHaveImages>
<MTSubCatsRecurse>
</MTSubCategories>
<MTIfNumVar name="col_count" value="2"><td></td><MTAddVar name="col_count" value="1"></MTIfNumVar>
<MTIfNumVar name="col_count" value="3"><td></td></tr><MTAddVar name="col_count" value="1"></MTIfNumVar>
</table>