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

今日は、「エントリー内の画像をリストアップするプラグイン」を利用したサンプルとして、最近の画像を表組みにして表示するものを紹介します。

1.テンプレートの作成

まず、インデックステンプレートを1つ作成し、テンプレートの名前を「最近の画像」、出力先ファイル名を「recentimages.html」にします。
そして、メインページのテンプレートの内容をコピーして、上で作ったテンプレートに貼り付けます。

2.エントリー出力部分の削除

1.のテンプレートから、エントリーを出力する部分（<MTEntries>～</MTEntries>の部分）を削除します。

3.最近の画像を出力する部分を追加

2.で削除した部分の代わりに、以下のタグを挿入します。
挿入が終わったらテンプレートを保存し、再構築します。

<table class="image-list" cellspacing="0" cellpadding="0">
<MTEntryImages img_lastn="15" columns="3">
   <MTEntryImageRowHeader><tr></MTEntryImageRowHeader>
      <td>
      <MTEntryImageIfEmptyCell>
      &nbsp;
      <MTElse>
         <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 class="image-list-caption"><MTEntryImageEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$><br />(<$MTEntryDate$>)</a></MTEntryImageEntry></td>
            </tr>
         </table>
      </MTElse>
      </MTEntryImageIfEmptyCell>
      </td>
   <MTEntryImageRowFooter></tr></MTEntryImageRowFooter>
</MTEntryImages>
</table>

なお、上の例は以下のような出力になります。

• 最近の画像を横3個×縦5個の計15個表示します。
• 120×90ピクセルに収まるように、画像を縮小して表示します。
• 画像をクリックすると、別ウィンドウが開いて、フルサイズで表示します。
• 画像の下には、その画像を含むエントリーの情報が表示され、それをクリックするとそのエントリーのページに移動します。

表示する画像の数を変えたい場合は、「<MTEntryImages lastn="15">」の「15」を変えます。

なお、画像のURLが「http://・・・/○○○-thumb,jpg」のような形になっている場合、画像のリンク先は「http://・・・/○○○,jpg」のように「-thumb」を取ったものに置換するようにしています。
これにより、Movable Typeの「ファイルのアップロード」の機能を使って画像をアップロードし、サムネールも作成している場合、画像の一覧にはサムネールが表示され、それをクリックすると元の画像が表示されます。

4.スタイルシートの追加

スタイルシートのテンプレートに、以下を追加します。
そして、スタイルシートを再構築します。

table.image-list {
    width : 390px;
    margin-left : auto;
    margin-right : auto;
    margin-top : 0px;
    padding : 0px;
}
table.image-list tr td {
    width : 130px;
    vertical-align : top;
}
table.image-list tr td table {
    margin-bottom : 10px;
}
table.image-list tr td table tr td.image-list-item {
    height : 90px;
    text-align : center;
    vertical-align : middle;
    padding : 0px;
    margin : 0px;
}
table.image-list tr td table tr td.image-list-caption {
    text-align : left;
    vertical-align : top;
    padding : 0px;
    margin : 0px;
}