サムネイル画像エントリリストの改造（さらにチューン）

TOPページ > 211Movable Type4 > サムネイル画像エントリリストの改造（さらにチューン）

サムネイル画像エントリリストの改造（さらにチューン）

2007年12月31日 15:02 | Writer: yoshi | 記事本文 | コメント(2) | トラックバック(0)

昨日のコードでは、htmlソースへ謎の空白行が大量に生成されて、いかにも見栄えが悪い。何とかならないだろうか？と思い、改造してみた。結果、OKのものが出来たので公表してみよう。原形をとどめないほどにコードが変わった。

なお、配列やなんかをバンバン使っているんで、1月末にリリース予定のMT4.1でないと動作しないと思う（MT4.0では試してはいないんだが）。今はベータ版（MT4.1b2）で作成している。

理解を深めるためのコード

実装コードは少しソースの見通しが悪いので、改行とインデントとコメントつきのコードを以下に。


<MTIfNonZero tag="AssetCount">

<!-- counter変数をゼロで初期化する -->
<$mt:setvar name="counter" value="0"$>

<!-- 全エントリループ -->
<MTEntries lastn="0">

    <!-- 画像のあるエントリのみ -->
    <MTEntryAssets type="image" lastn="1">

        <!-- counter変数をインクリメント -->
        <$mt:setvar name="counter" op="++"$>

        <!-- エントリのパーマリンクをEntryLink[]配列へ代入 -->
        <MTSetVarBlock name="EntryLink[$counter]"><$MTEntryPermalink$></MTSetVarBlock>

        <!-- イメージの縦横大きさを70pxに揃えるための準備 -->
        <MTSetVarBlock name="imagewidth"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
        <MTSetVarBlock name="imageheight"><$MTAssetProperty property="image_height"$></MTSetVarBlock>

        <!-- イメージリンクへのコードをまとめてセットでImageCode[]配列へ代入 -->
        <MTIf name="imagewidth" gt="$imageheight">
            <MTSetVarBlock name="ImageCode[$counter]"><img src="<$MTAssetThumbnailURL height="70"$>" alt="on <$MTAssetProperty property="description"$>:<$MTAssetProperty property="description"$>" title="on <$MTEntryTitle$> : <$MTAssetProperty property="description"$>" /></MTSetVarBlock>
        <MTElse>
            <MTSetVarBlock name="ImageCode[$counter]"><img src="<$MTAssetThumbnailURL width="70"$>" alt="on <$MTAssetProperty property="description"$>:<$MTAssetProperty property="description"$>" title="on <$MTEntryTitle$> : <$MTAssetProperty property="description"$>" /></MTSetVarBlock>
        </MTIf>

    </MTEntryAssets>
</MTEntries>

<dl>
<dt>Photos(Tune2)</dt>
<dd>
<ul>
<!-- forループ -->
<mt:for var="x" from="1" to="10">
    <li class="item">

        <!-- エントリリンクを取得 -->
        <a href="<MTGetVar name="EntryLink[$x]">">

        <!-- イメージリンクへのコードセットを取得 -->
        <MTGetVar name="ImageCode[$x]">

        </a>
    </li>
</mt:for>
</ul>
</dd>
</dl>
</MTIfNonZero>

もっと詳しく！

上記コードの動作原理や、処理順序（フローが書けないので箇条書きです。スイマセン）

counter変数をゼロで初期化（必須）
MTEntryループ開始
画像のある、かつcounter変数が10を超えない条件にマッチしたときに
counter変数をインクリメント（+1足す）
エントリのパーマリンクをEntryLink[]配列へ代入
画像を縦横70pxになるような処理を施して、コードを一式ImageCode[]配列へ代入
MTEntryループ終了
Forループで10回まわす。
配列ENtryLink[]とImageCode[]を1から10まで順番に吐き出す
Forループオワリ

注意点

配列取得のMTEntriesループは一行で書くこと。こうすると無駄スペースが出来ません。

実際の実装コードは以下。


<MTIfNonZero tag="AssetCount">
<$mt:setvar name="counter" value="0"$>
<MTEntries lastn="0"><MTEntryAssets type="image" lastn="1"><$mt:setvar name="counter" op="++"$><MTSetVarBlock name="EntryLink[$counter]"><$MTEntryPermalink$></MTSetVarBlock><MTSetVarBlock name="imagewidth"><$MTAssetProperty property="image_width"$></MTSetVarBlock><MTSetVarBlock name="imageheight"><$MTAssetProperty property="image_height"$></MTSetVarBlock><MTIf name="imagewidth" gt="$imageheight"><MTSetVarBlock name="ImageCode[$counter]"><img src="<$MTAssetThumbnailURL height="70"$>" alt="on <$MTAssetProperty property="description"$>:<$MTAssetProperty property="description"$>" title="on <$MTEntryTitle$> : <$MTAssetProperty property="description"$>" /></MTSetVarBlock><MTElse><MTSetVarBlock name="ImageCode[$counter]"><img src="<$MTAssetThumbnailURL width="70"$>" alt="on <$MTAssetProperty property="description"$>:<$MTAssetProperty property="description"$>" title="on <$MTEntryTitle$> : <$MTAssetProperty property="description"$>" /></MTSetVarBlock></MTIf></MTEntryAssets></MTEntries>
<dl>
<dt>Photos(Tune2)</dt>
<dd>
<ul>
<mt:for var="x" from="1" to="10">
    <li class="item">
        <a href="<MTGetVar name="EntryLink[$x]">">
        <MTGetVar name="ImageCode[$x]">
        </a>
    </li>
</mt:for>
</ul>
</dd>
</dl>
</MTIfNonZero>

実際のテストサイトと後記

テストサイトは以下。右サイドバーの、Photosが今このブログで使用中のもの、Photos(Tune)が昨日のコード、Photos(デフォルト)がMT4のデフォルト画像リスト（単なる画像リストだ。エントリリンクは貼られていない）、Photos(Tune2)が今回のコード。htmlコードを確認すると違いは一目瞭然。

テストサイト：http://www.apstars.com/mt41b2/

データを先に準備して後でループで使うという、ややプログラムちっくなコードとなった。ただし、コードが役割ごとに別の場所に書いてあるために、以前の（初期の）コードよりはこちらのほうが理解はしやすい筈である。短いのでコピペも楽。

余談だが、MTAssetsブロックにMTEntryPermalinkファンクションタグ辺りがあればこんな小難しいことしなくてもよいのだが、どうやら無いようである。