4.0時代にサムネイルリストから記事にリンクを張るカスタマイズをやりましたが、この中の「応用編」にはいくつかの課題が残っていました。
フォトログではない普通のブログでサムネイルから記事にリンクを張る場合。どのエントリーにも画像が存在するとは限らないので、<MTEntries lastn="10">では制御できません。そのため、頭をひねって画像のIDで制御する方法をとっていたのですが、実はこれにも限界がありました。
- エントリーに複数画像がある場合は、それも全部カウントされるので、同じ記事にリンクされているサムネイルが多数並んでしまう。
- かといって<MTEntryAssets type="image" lastn="1">で記事に属する画像のうち１枚だけを代表サムネイルにすると、その分指定した数よりサムネイル数が減ってしまう。
- 理想は記事に所属する画像１枚だけを抜き出し、かつ指定したサムネイル数が常に保たれるようにしたい。
そのための可能性をいろいろ探っていて、考えたのは「画像の属するエントリーにのみ連番をふり、指定した数より少ないエントリーだけをサムネイル表示させる」ということでした。エントリーを更新順にソートすると同じ考え方です。ところが、これが上手くいかないのです。例えば以下のように番号をふりたいのに…。
１画像あり 画像なし 画像なし ２画像あり 画像なし ３画像あり
どうしても以下のようになってしまう。
１画像あり ２画像なし ３画像なし ４画像あり ５画像なし ６画像あり
Counter PluginでもAutoIncrementalVarプラグインでもMT4から追加されたカウンター変数__counter__でも、どれを使っても画像なしエントリーまでカウントされてしまう。かといってカウンターを<MTEntryAssets>以下にセットすると、そのエントリーの中での画像を数えることになるので、以下のようにカウント数が全部１になってしまう。
１画像あり 画像なし 画像なし １画像あり 画像なし １画像あり
これでは画像ありエントリーのみの抽出には使えません…。
ところが！ ここでMT4.1が登場し、その限界を突破してくれる新しいモディファイアが登場したのです。それがインクリメント機能を持つop モディファイアでした。これでカウントすれば画像ありエントリのみに連番をつけることができるのです。これが早くMT4.1に移行したかった一番の理由でした。
■本題：サイドバーに記事リンク付きサムネイルリストを作る 4.1完成版
タグを組むに当たっては、以下のサイト様を参考にさせていただきました。ありがとうございます。
Under the Bridge サムネイル画像エントリリストの改造（OK版）
これをMT4.1デフォルトwidget用に書いてみたのが以下です。赤字の部分に表示したい数を指定します（例：10個並べたい場合は10と記入する）。私の頭の理解の及ぶ範囲で組んでみたので、参照元とはちょっとタグ使いが違うところがありますが、目的は達せられているのでよしとします。私の好みでサムネイルを全部正方形にするカスタマイズも入れてますので、スタイルシートの変更も忘れずに。
＜注＞4.1以降でないと使えません。4.0、4.01では動作しませんのでご注意下さい。
<MTIfNonZero tag="AssetCount">
<div class="widget-recent-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list">
<MTSetvar name="imgcount" value="0">
<MTEntries lastn="0">
<MTEntryAssets type="image" lastn="1">
<MTSetVar name="imgcount" op="++">
<MTIf name="imgcount" le="10">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<li class="item">
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse>
</MTIf>
</a></li>
</MTIf>
</MTEntryAssets>
</MTEntries>
</ul>
</div>
</div>
</MTIfNonZero>
.item {
display: inline;
float: left;
margin: 0pt 5px 8px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 70px;
height: 70px;
}
新規で4.1デフォルトを使用、4.1にバージョンアップしてテンプレートを初期化された場合
スタイルシートはmt-static/themes-base/blog.cssの.itemに赤字の部分を追加。
4.0系からバージョンアップしてテンプレートの初期化を行っていない場合
緑字の部分をwidget-assetsに変更し、<div class="widget-assets widget">となるようにして下さい。
スタイルシートはメインインデックスのbase_theme.cssの.itemに赤字の部分を追加。
＊4.0系と4.1では一部class名が変更されている部分があります。テンプレを初期化しているかどうかで修正箇所が異なりますので、ご注意下さい。
ポイント１
<MTEntryAssets type="image" lastn="1">だと記事中の最新の画像、すなわち記事の中では最後に出てくる画像が代表サムネイルになる確率が高いです。普通は記事を書きながら順番に画像をアップしていくと思いますから。なので、記事の一番上に表示される画像（その記事中では一番古い画像）を代表サムネイルにしたい場合は<MTEntryAssets type="image" lastn="1" sort_order="ascend">としてやれば、一番上の画像をサムネイルにすることができます。
ポイント２
参照元で指摘されている通り、このまま使うとソースに大量の無意味な空白ができますが、青字の部分を一行でつなげて書くことでそれは回避できます。ちなみにダイナミック・パブリッシングだとこのままの記述でも空白は生じないです。
自サイトに合わせたカスタマイズで動作中の頁はこちら。
＜2008.2.3 追記・修正＞アップデート時の注意書きを追加。
＜2008.8.20＞タイプミスを修正。
コメント
早々に頂きました。取り急ぎお礼申し上げます。
ありがとうございました・・・
ああっすみません、当サイトのStyleCatcher「サイクリング」を使われている場合はitemのmarginは以下のようになります。
margin: 0pt 4px 8px;
基本itemにはheight: 70px;を追加するだけでいいです（他は触る必要なし）。
説明不足で申し訳ありません。エントリーにも追記しておきました。
ひこぼしも早速いただきました。こんどのバージョンは気分よく動作して快適です。
【感謝！】
ただMac版ののOperaではなぜか正方形になってくれません。XPやvistaではOKです。不思議ですね。
ともかく、ありがとうございました♪
＞ひこぼしさん
サイトを拝見して気がついたのですが、4.1デフォテンプレに初期化していない場合は一部のclass名に注意が必要でしたね。追記しておきましたのでご確認下さい。これでサムネイルリストの下部に余白が戻ると思います。
Macは持ってないので確認できないんですが、そうなんですか…。
不思議ですね。一度Macで自分のサイトを見てみたいです。
ありがとうございましたm(_ _)m
さっそく修正させていただきました。
それとタグクラウドなんですがデフォルトのままではアスキー順にならんでしまいました。
素人考えでえで、sort_order="count"にしてみましたが、どういうもんなんでしょう。
これもcssを初期化していないからだったんでしょうか？
sort_by="count"
の間違いでした、
もうちょっと正確に書いておきます
<div class="widget-cloud widget">
<h3 class="widget-header">タグクラウド
<div class="widget-content">
<ul class="widget-list">
<MTTags limit="20" sort_by="count">
<li class="rank-<$MTTagRank max="10"$> widget-list-item"><a href="<$MTTagSearchLink$>">
</MTTags>
</ul>
</div>
</div>
と書いたソースを“tagcloud.php”という名前でインデックステンプレートに保存して、モジュールテンプレートのサイドバー（3カラム）に
<$MTInclude file="tagcloud.php"$>
と書いてあります。
最初、“sort_order="descend"”も書いてみましたが、これは不要だったみたい。
こんな記述でいちおう動いています。
＞ひこぼしさん
タグクラウドがabc順に並ぶのは、もともとそういう仕様なので、アルファベットが先にきて日本語がその後に並ぶのはこれで正しい動作です。今のままで何も問題ないと思いますよ。^^
それとも何か違う順で並べられたかったのでしょうか？
タグクラウドもsort_by="count"などで並び順を変えることができるのですね。ひこぼしさんのお好きなソートで楽しんで下さいね。
やっぱり、カテゴリーはあらかじめ体系的に記事の内容を分類しているのに対して、タグは階層化できない代わりに記事の中身を直感的に連想する表題をその場で加えることに価値を感じています。
だからタグがアスキー配列でソートされていると、たとえばぼくの大好きな吉田美奈子さんの記事なんかが永遠に埋没してしまうでしょ。
もちろんタグクラウドの数を増やせばいいかもしれませんが、その中身のある記事の頻度は案外重要な要素で、ひこぼしとしてはタグクラウドはエントリーの頻度順にソートしたかったんです。
以上、ご報告しておきます♪
ああなるほど、そういうことだったんですね。
sort_by="ID"ともまた違うのかな…。
sixapartに要望出すといいかもしれませんね。