サムネイルをクリックで記事に飛ぶようにする

mt.Vicunaを使用している場合のカスタマイズです。トップページのサイドバーとか記事の詳細ページの下に、PHOTO項目が加わりました。

PHOTO項目はVicunaテンプレートに元々入っていますが、サムネイルをクリックすると、元のサイズの画像を表示するだけです。折角なら記事へリンクさせた方が良いなぁと思って実行。
MovableTypeの独自タグとは縁遠い初心者視点からすれば、単純にサムネイルのリンク先を「画像のアドレス」から「記事のアドレス」に書き換えるだけだと思ってたんだ・・・大間違いだった!!

何かの役に立つかもしれないので、参考程度にソース書いておきます・・・焼きそばが食べたくなってきた。

mt.Vicuna（ver2.13）テンプレートを使用しているMT4.1の環境で説明します。
デザイン→テンプレート→メインページ→（インクルードモジュール内の）ユーティリティー→u_フォト
と進み、「u_フォト」のソースを書き換えます。場合によって2タイプのソースがあります。
（u_フォトが無い場合は<$MTInclude widget="u_フォト"$>を追加して保存）

記事に必ず画像がある場合のソース

とても簡単です。サムネイルリストからブログ記事（エントリー）にリンクを張る (MT４用)で紹介されているソースを、<ul>の中に入れるだけ。

<dt>Photo</dt>
<dd>
<ul class="thumb">
<MTEntries lastn="10">
<MTEntryAssets type="image" lastn="1">
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="<$MTAssetThumbnailURL height="70"$>" alt="<$MTEntryTitle$>" />
</a></li>
</MTEntryAssets>
</MTEntries>
</ul>
</dd>

lastn="10"の10は、最新10件のことです。この数字を変更すれば表示させるサムネイルの数を変更できます。

画像が無い記事もある場合のソース（MT4.1以上）

上のソースだと、最新10件の記事の画像しか見ていません。なので、例えば最新10件の中に、文章だけの記事が2件あった場合、表示されるサムネイルは8個になってしまいます。その辺はサムネイルリストからブログ記事（エントリー）にリンクを張る(2) MT4.1完成版で説明されてます。このページには、そういう問題をうまく回避したソースも載ってますが、もうちょっとシンプルなのがサムネイル画像エントリリストの改造（OK版）のソースです。これをVicuna用にすると

<dt>Photo</dt>
<dd>
<MTIfNonZero tag="AssetCount">
<$mt:setvar name="counter" value="0"$>

<ul class="thumb">
<MTEntries lastn="0">
<MTEntryAssets type="image" lastn="1">
<MTIf name="counter" lt="8">
<$mt:setvar name="counter" op="++"$>
<MTSetVarBlock name="imagewidth"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imageheight"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<li>
<a href="<$MTEntryPermalink$>">
<MTIf name="imagewidth" gt="$imageheight">
<img src="<$MTAssetThumbnailURL height="70"$>" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="70"$>" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTIf>
</a>
</li>
</MTIf>
</MTEntryAssets>
</MTEntries>

</ul>
</MTIfNonZero>
</dd>

余力があったら考えたかったこと

サムネイル同士の隙間

サイドバーを見ると左に片寄っちゃってます。間隔を広げようとしてul.thumb liのmargin設定変えたのに微動だにしない。liだけじゃなくulいじっても変化なし。なんでだろう。まぁいいや。
Futureのサンプルみたいに、「Search」とか「Recent Comments 」のブロックに入れたら、そっちは良くてもページ下の方が表示崩れて大暴れｗｗｗｗｗ

IE6で枠からはみ出てる

ページ下に表示される方の項目ですがIE6だと4枚分はみ出てる。Firefoxではそんなことなかったのでまぁいいや。

ソースの余分な空白

テンプレート編集で、改行とかスペースを無くして詰めちゃえばある程度回避できるらしいけど、タグのセットが見難くなるからまぁいいや。

見せたい画像がサムネにならない

今回のソースだと、ひとつの記事の中に複数の画像があった場合、記事内の最後の一枚が選ばれている（最後の一枚＝「画像の挿入」でアップロードした最後の画像）。
見せたい画像ほど、最初にアップロードしちゃうからなぁ。複数画像がある記事はそんなにないのでまぁいいや。
追記（2009年1月14日）：
サムネイルリストからブログ記事（エントリー）にリンクを張る(2) MT4.1完成版にて、sort_order=”ascend”　を記入して、一番古い画像をサムネイルにする方法がポイントとして追加されていました

そもそもPHOTO項目自体、無いよりはあった方が良いかな程度のものなのでもうこれでいいや。

Tweet