4.0時代にサムネイルリストから記事にリンクを張るカスタマイズをやりましたが、この中の「応用編」にはいくつかの課題が残っていました。
フォトログではない普通のブログでサムネイルから記事にリンクを張る場合。どのエントリーにも画像が存在するとは限らないので、<MTEntries lastn="10">では制御できません。そのため、頭をひねって画像のIDで制御する方法をとっていたのですが、実はこれにも限界がありました。
- エントリーに複数画像がある場合は、それも全部カウントされるので、同じ記事にリンクされているサムネイルが多数並んでしまう。
- かといって<MTEntryAssets type="image" lastn="1">で記事に属する画像のうち１枚だけを代表サムネイルにすると、その分指定した数よりサムネイル数が減ってしまう。
- 理想は記事に所属する画像１枚だけを抜き出し、かつ指定したサムネイル数が常に保たれるようにしたい。
そのための可能性をいろいろ探っていて、考えたのは「画像の属するエントリーにのみ連番をふり、指定した数より少ないエントリーだけをサムネイル表示させる」ということでした。エントリーを更新順にソートすると同じ考え方です。ところが、これが上手くいかないのです。例えば以下のように番号をふりたいのに…。
１画像あり 画像なし 画像なし ２画像あり 画像なし ３画像あり
どうしても以下のようになってしまう。
１画像あり ２画像なし ３画像なし ４画像あり ５画像なし ６画像あり
Counter PluginでもAutoIncrementalVarプラグインでもMT4から追加されたカウンター変数__counter__でも、どれを使っても画像なしエントリーまでカウントされてしまう。かといってカウンターを<MTEntryAssets>以下にセットすると、そのエントリーの中での画像を数えることになるので、以下のようにカウント数が全部１になってしまう。
１画像あり 画像なし 画像なし １画像あり 画像なし １画像あり
これでは画像ありエントリーのみの抽出には使えません…。
ところが！ ここでMT4.1が登場し、その限界を突破してくれる新しいモディファイアが登場したのです。それがインクリメント機能を持つop モディファイアでした。これでカウントすれば画像ありエントリのみに連番をつけることができるのです。これが早くMT4.1に移行したかった一番の理由でした。
■本題：サイドバーに記事リンク付きサムネイルリストを作る 4.1完成版
以下は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に要望出すといいかもしれませんね。
はじめまして。
よい方法が思いつかず検索してこのエントリーにたどり着きました。
とても参考になるサイトですね！
この方法ならやりたいことが出来るのではと、
さっそくMT4.22でこの方法を参考にさせていただきました。
おかげさまでほぼ思い通りの動作はしたのですが、
ひとつ質問が。。。
例えば、同じMTシステム内の別ブログから画像を読み込みたい場合に、
<MTEntries lastn="0">にblog_ids="2"などを付け加え、
<MTEntries lastn="0" blog_ids="2">としたのですが、どうも表示されません。
そこで
<MTEntryAssets type="image" lastn="1">にもidを付け加え、
<MTEntryAssets type="image" lastn="1" blog_ids="2">としたのですが、
これも表示されませんでした。
前のエントリーの下記のような基本のタグであれば別ブログの画像が表示されました。
<ul>
<MTEntries lastn="10" blog_ids="2">
<MTEntryAssets type="image">
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="<$MTAssetThumbnailURL height="70"$>" alt="<$MTEntryTitle$>" />
</a></li>
</MTEntryAssets>
</MTEntries>
</ul>
なにが原因なのか助言をいただければ幸いです。。。
どうぞよろしくお願いいたします！
＞ismさん
こんにちは。
少しでも参考になれるところがあれば嬉しいです。
ご質問の件ですが、自サイト（4.23）でこの頁のタグにblog_ids="2"を追加して<MTEntries lastn="0" blog_ids="2">で動作確認してみましたが、静動どちらでも問題なくid=2の画像が表示され、症状を再現することができませんでした。4.22と4.23の差分は管理画面テンプレート系の修正なので、バージョンには関係ないと思うのですが、不思議ですね…。
この頁のタグを「どこも一切触らずまるっと完全コピペしたもの」にblog_ids="2"を追加しても表示されませんか？ よろしければご確認お願い致します。
お忙しい時期にさっそくのお返事ありがとうございました！
ＴＡＥＫＯさんの環境では問題なく表示されたということで、やっぱりこちらでなにか変なことをやってるのでしょうね。。
で、このページのタグをそのまままるっと完全コピペして、
<MTEntries lastn="0">にblog_ids="2"を追加してみました。
が、これでも表示されませんでした。。。
試しに、id=2のほうのブログのテンプレート自体にそのまままるっとコピペしてblog_ids="2"を追加して試してみたところ、これはきっちり表示されました。。
う〜〜〜〜んなぜなんですかねえ。
もうちょっといろんなこと試して原因を絞り込みながら追求していきたいと思います！
なんかアドバイスなどあったらお時間のある時にでもいただけたら嬉しいです。
この年末のお忙しい時期に変な質問してしまってスミマセンです。それでは！
＞ismさん
あれ、ということは同じMTの中でblog_ids="2"が効くブログと効かないブログがあるんですね。
<MTEntries lastn="0" blog_ids="2">自体には問題ないと思うので、２つのブログを見比べて現象発生する条件を絞り込んでみて下さい。そしたら何か分かってくるのではと思うので。
あまりお役に立てなくてすみません。
はじめまして。
最近MTを触り始めたのですが
いろいろ探していたらここにたどりつきました。
いきなりのコメントすみませんDAMBOと申します。
サムネイルに記事へのリンクを張るとういう大変便利なものがココには書かれていますが、最新記事のタイトルと日付に合わせてその記事にある画像を抜き出してサムネイルとして同時にサイドバー等に表示させる方法はありますか？
伝わりにくいかもしれませんが、トップページでよくあるサムネイル付最新情報
のようなものが作りたいのですが。
よろしくお願いします。
＞DAMBOさん
こんにちは。
＞最新記事のタイトルと日付に合わせてその記事にある画像を抜き出してサムネイル
出来ますよ。画像のある記事だけでよければこの記事の<MTIf name="imgcount" le="10">以下の好きな場所に<$MTEntryTitle$><$MTEntryDate$>などを入れればいいです。
画像のあるなしに関係なく最新の記事リストを表示して画像のある記事にだけサムネイルを付けるのならば以下の記事がご利用出来るのではと思います。
http://wing.w-museum.com/200802091520.html
レイアウトは好きに工夫して下さいね。
はじめまして。
私も最近MTを触りはじめサイト構築をしているのですが行き詰っていた所に
こちらのサイトにたどりつきました。
現在、カタログサイトを作成中で上記のソースを使わせていただくと全カテゴリーの商品名や商品画像が表示されるのですがカテゴリー別に表示させるにはどうしたらいいのでしょうか。
参考書を見て自分なりに色々とやってみたのですが思うように表示が出来ず困っています。
何かアドバイスをいただけたらと思います。
宜しくお願いいたします。
＞soraさん
こちらこそ初めまして。参考にしていただけて嬉しいです。
特定のカテゴリーだけ表示するのであれば
<MTEntries category="カテゴリ名">
カテゴリーごとに表示するなら
<MTArchiveList archive_type="Category">
<$MTArchiveTitle$>
<MTSetvar name="imgcount" value="0">
<MTEntries>
ソース
</MTEntries>
</MTArchiveList>
な感じでしょうか。
これでご希望の動作になるかどうか分かりませんが、とりあえず試してみて下さい。
はじめまして。
検索結果ページに該当する商品の画像と商品名をサムネイル表示をさせ個別ページにリンクを張りたいのですがうまく出来ません。上記のソースを変えて色々と試したみたんですが思ったような表示が出来ないでいます。
私にも何かアドバイスをいただけないでしょうか。宜しくお願いいたします。
＞matsuさん
こちらこそ初めまして。
もしかして検索結果にサムネイルも表示させたいということでしょうか？
でしたらこの記事とmatsuさんのされたいことは目的が全然違うと思います…。
検索結果にサムネイルを入れるのなら単純に<MTSearchResults>～</MTSearchResults>の中に<MTEntryAssets>を書けばいいと思います。
最も単純な例
<mt:SearchResults>
<MTEntryAssets type="image" lastn="1">
<img src="<$MTAssetThumbnailURL height="50"$>" />
</MTEntryAssets>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</mt:SearchResults>
あとはこれの応用になるかと思います。
ご質問の意味を取り違えていましたら申し訳ありません。
アドバイスをいただきましてありがとうございます。質問した場所が違ったみたいで申し訳ありません。
アドバイス通りにやったら思いどうりの表示が出来、ホントに助かりました。
ホントにありがとうございます。
＞matsuさん
あ、お気になさらないで下さいねー。
ご希望の表示になってよかったです。これからもよろしくお願い致します。