お知らせ

Movable Type 5.1 Webサイト製作ガイドVolume 12011年6月30日

Movable Type 5.1 Webサイト製作ガイドVolume 1」を発売しました。
Movable Type 5.1を基本からしっかりマスターしたい方のための書籍です。
前書「Movable Type 5 Webサイト製作ガイド Volume 1」をMovable Type 5.1対応に改訂しました。 Movable TypeでWeb製作をされている方などにお勧めです。
PDFによる販売で、当サイトでのみ購入できます(書店では購入できません)

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

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

| コメント(3) | トラックバック(0)

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

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

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

1.考え方

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

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

1.列の番号が1の時は、行の先頭なので、<tr>タグを出力する
2.画像を1つ出力する
3.列の番号が3の時は、行の最後なので、</tr>タグを出力する
4.列の番号を1つ増やし、その値が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>

Facebook連携

当記事について「いいね」や「送信」を行っていただけると幸いです。


この記事についてウォールに投稿

トラックバック(0)

トラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/629.

コメント(スレッド3件,コメント3件)

コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。

No.1 oscar : (無題)

こんにちは、壱さん。さっそくこのプラグイン、試させていただいてます。
インデックステンプレート内で使用した場合、すべてのエントリーから画像を拾う様ですが、例えば「エントリー内で使われている画像を抜き出して加工する」ような使い方は出来ないでしょうか。
RSSの中でエントリー内画像をサムネイルとして表示させる使い方を考えているのですが。

No.2  : (無題)

>oscarさん
こんにちは。プラグインご利用ありがとうございます。

ご希望の件はバージョンアップで対応します。

No.3 oscar : (無題)

こんにちは。 壱さん。
>ご希望の件はバージョンアップで対応します。
ご検討いただきありがとうございます。
バージョンアップ、心待ちにいたしております。

コメントする


Facebookでコメント

試験的にFacebookのコメントフォームを設置しました。