top

サムネイルリストからブログ記事(エントリー)にリンクを張る (MT4用)

MT4サイドバーのサムネイルリストはデフォルトでは直接画像へリンクが張られています。それはそれでいいのですが、ブログの内容や方針によっては、画像ではなく、画像のあるエントリー記事へリンクを張りたいと思うことはありませんか。

これが実は出来るんです。MT4には「自動でサムネイルを作って、そのサムネイルから自動で記事へリンクを張る」機能があるんです。これには<MTEntryAssets>タグを使います。MTタグだけで実現できてしまうので、すごい便利です。

■カスタマイズの前に…画像と記事の関連性について
まずはおさらい。特定のブログ記事(エントリー)にどの画像が属しているのか知るためには、画像とブログ記事(エントリー)が何らかの形で紐付けられていなければならないのですが、MT4の場合はユーザーが自分で何かしなくても画像挿入時に実はもう既にちゃんと関連付けがされているのです。MT4になってから、画像をアップした時に挿入されるタグが何だか複雑なものになりましたが、実はここがポイントだったのです。例えば・・・

<form mt:asset-id="12" class="mt-enclosure mt-enclosure-image"><img alt="hogehoge" src="http://www.example.com/photo/hogehoge.jpg" width="400" height="300" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></form>

この周りの<form mt:asset-id="12" class="mt-enclosure mt-enclosure-image"></form>って何よ!?と思った方、おられるのではないでしょうか(ハイ、私です)。ところが、実はここが画像とエントリーを紐付けている部分だったのですね。mt:asset-id="12"というのが画像のID番号です。そのため「何だコレ、こんな意味不明なもん要らん」などと自己判断で削除してしまうと関連付けがなくなってしまい、システムがエントリーに所属する画像を探せなくなってしまいます(具体的には<MTEntryAssets>タグが機能しなくなります)。ですので、「MTに自動でサムネイルから記事にリンクを張ってほしい」場合はこの赤字の部分、勝手に消さないようにご注意(←最初意味が分からず削除しまくっていた人は語る…)。
なお、<form mt:asset…></form> の部分は投稿された記事の中では<span></span>に置きかえられますので、実際の記事中では上のタグは以下のようになります。

<span class="mt-enclosure mt-enclosure-image"><img alt="hogehoge" src="http://www.example.com/photo/hogehoge.jpg" width="400" height="300" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></span>

つまり、<form>タグとasset-idが刻まれるのはあくまでもデータベースの中のみであって、表示される記事には出てきませんので、不必要に<form>を気にすることはないです。

■基本のタグ
以下が基本のタグになります。分かりやすいように余計なタグやclassは省いてます。フォトログやギャラリーブログ(カテゴリ)のように「どのエントリーにも必ず画像が存在する」場合に適してます。赤字の部分は好きな数字に。

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

これにサムネイルを全部正方形にするカスタマイズを加えると以下のような感じに。

<ul>
<MTEntries lastn="10">
<MTEntryAssets type="image">
<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>
</MTEntryAssets>
</MTEntries>
</ul>
.item {
display: inline;
float: left;
margin: 0pt 5px 8px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 70px;
height: 70px;
}

1つのエントリーに複数の画像が存在し、そのうちの1つだけサムネイルにしたい場合はMTEntryAssetsにlastn="1"をつけて、<MTEntryAssets type="image" lastn="1">とすればOKです。別ブログにしているフォトログの画像を表示したい場合はMTEntriesに表示させたいブログのIDを付けて、<MTEntries lastn="10" blog_ids="2">などとすればOKです。

ちなみにリスト用サムネイルは自動で作成されるので自分で作る必要はないです。MTが自動生成したサムネイルはassets_cフォルダ以下に作られます。リスト用サムネイルは<$MTAssetThumbnailURL$><$MTAssetThumbnailLink$>タグでアクセスされた場合にのみ生成されるので、無暗に全部の画像に作られるわけではないです。

■応用編~サイドバーに記事リンク付きサムネイルリストを作る
これをMT4デフォルトのサイドバーにサムネイルリストとして組み込んで、「記事へのリンク付き最新10画像のリスト」を作ってみます。ただし普通のブログはフォトログのようにどのエントリーにも必ず画像があるわけではないので、上のタグでは必ずしも期待するような動作にはなりません。<MTEntries lastn="10">では「最新の10記事の中の画像」になってしまい、その中に画像が3個しかなかったらサムネイルも3個しか出来ないからです。どころか、最新10記事の中に画像が1枚もなかったら、最悪「サムネイル1つもなし!」状態になってしまいます(^^;。

そこでちょっと一工夫。考え方を変えて、「全エントリーから最新10個の画像を選び出して新しい順番に並べる」ことにします。具体的にはまず<MTAssets type="image" lastn="1" offset="9">で最新から10個目の画像のIDを求め、それより大きいIDを持つ画像を表示することにしてみました。赤字の部分に表示したい数より1つ少ない数を指定しておきます(例:10個並べたい場合は9にする)。なお、私の好みでサムネイルを全部正方形にするカスタマイズも入れてます。

<MTIf name="main_index">
<MTIfNonZero tag="AssetCount">
<div class="widget-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list">
<MTSetVarBlock name="imgid"><MTAssets type="image" lastn="1" offset="9"><$MTAssetID$></MTAssets></MTSetVarBlock>
<MTEntries lastn="0">
<MTEntryAssets type="image">
<MTSetVarBlock name="imgid2"><$MTAssetID$></MTSetVarBlock>
<MTIf name="imgid" le="$imgid2">
<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>
</MTIf>

ここでもエントリーに複数画像がある場合、<MTEntryAssets type="image" lastn="1">として、そのうちの1つだけを代表サムネイルにすることが出来ます。ただしそれをやると設定した数字よりサムネイルの数が少なくなりますが、基本タグのように「サムネイル1つもなし状態」は避けられます。そこはお好みで。
追記:この方法の問題点を解決した方法をこちらで公開しています。ただし4.1以上用です)

「記事数が多いので全エントリーを抽出の対象にするのはパフォーマンスが心配」という場合は、<MTEntries category="日記 OR 旅行記"><MTEntries category="NOT カスタマイズ">などのように特定のカテゴリだけ対象にしたり、サムネイルには出したくないカテゴリは除外するなどすればある程度エントリーを絞りこめます。また、<MTEntries lastn="50">のようにほどほどの数字を当てておくのもいいかもしれません。


☆ということで、実はMT4のAssets機能をフル活用してフォトログを作り直そうと目論んでいるのですが、その前に片付けておかなければならないことが山積みなので、取りかかれるのはしばらく先になりそうです(^^;。

関連するエントリー:
サムネイルリストからブログ記事(エントリー)にリンクを張る(2) MT4.1完成版

<2007.9.23 追記>
<form>タグに関するより詳しい説明を追加。