上手いタイトルが思いつかない…(^^;。「最新のサムネイル画像と合わせて記事リストを表示したい。画像のない記事にはNo Imagesのような決められた画像を表示したい」というご質問をいただきました。これはプラグインやキーワード欄を利用する方法でも実装できますが、MT4ならではのMTタグのみで実装する方法を考えてみました。
ブログ記事リストにサムネイルも表示させるだけなら簡単に出来ます。以下のようにすればＯＫです。画像の大きさはお好みで。
<ul>
<MTEntries lastn="10">
<li>
<$MTEntryTitle$>
<MTEntryAssets type="image" lastn="1">
<img src="<$MTAssetThumbnailURL height="50"$>" alt="<$MTEntryTitle$>" />
</MTEntryAssets>
</li>
</MTEntries>
</ul>
トップ頁・カテゴリインデックスにはサムネイルと概要を表示したい、という場合なら↓こんな感じでもいけるかと。
<MTEntries lastn="10">
<$MTEntryTitle$>
<div>
<MTEntryAssets type="image" lastn="1">
<img src="<$MTAssetThumbnailURL height="70"$>" alt="<$MTEntryTitle$>" />
</MTEntryAssets>
<$MTEntryExcerpt$>
</div>
</MTEntries>
ただし、これでは画像がない記事には何も表示されないんですね。それでいいならこのままで問題ないんですが、画像なしエントリにNo Images画像を表示させたいならこれだけでは使えない。そのためには「記事に画像がない場合」で条件分枝させる必要があるんですが、そういう都合のいいMTタグはないようで…。
そこで画像ありエントリに目印をつけて、目印がある場合とない場合で条件分枝させる方法を考えてみました。
■記事リストに画像のサムネイルも表示する～基本編
画像サムネイルを表示させ、サムネイルからは記事へのリンクも張る。画像がないエントリーにはNo Images画像を表示させる。その最も基本的なタグを一例として組んでみました。構造が分かりやすいように装飾は何も行っていません。
赤字の部分は好きな文字列でかまいませんが、２か所とも同じ文字にして下さい（例ではaaaaaになっていますがphotoでもimageでもかまいません）。
<ul>
<MTEntries lastn="10">
<MTSetVarBlock name="img"><MTEntryAssets type="image">aaaaa</MTEntryAssets></MTSetVarBlock>
<li>
<$MTEntryTitle$>
<MTIf name="img" like="aaaaa">
<MTEntryAssets type="image" lastn="1">
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="<$MTAssetThumbnailURL height="50"$>" alt="<$MTEntryTitle$>" />
</a>
</MTEntryAssets>
<MTElse>
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="No Images画像" alt="<$MTEntryTitle$>" />
</a>
</MTElse>
</MTIf>
</li>
</MTEntries>
</ul>
【補足説明】
<MTSetVarBlock name="img">～</MTSetVarBlock>の部分で画像のある記事にaaaaaという文字列をセットして目印にしています。<MTIf>でaaaaaという文字列がセットされている記事にはサムネイルを表示させ、aaaaaがセットされてない記事には代替え画像（No Images画像）を表示させるようにしています。
■画像サムネイル付き記事リスト～応用編
上のタグは基本のみの素の状態なので、「画像サムネイルを表示し、横に記事タイトルと概要を表示する」形に成形し、もう少し実際に応用できそうなタグを一例として組んでみました。サムネイルを全部正方形にするカスタマイズも入れてますので、お好みに合わせて調整を。
<MTEntries lastn="10">
<MTSetVarBlock name="img"><MTEntryAssets type="image">aaaaa</MTEntryAssets></MTSetVarBlock>
<div class="thumlist">
<div class="thum">
<MTIf name="img" like="aaaaa">
<MTEntryAssets type="image" lastn="1" srt_order="ascend">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="80"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="80"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse>
</MTIf></a>
</MTEntryAssets>
<MTElse>
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="No Images画像" alt="<$MTEntryTitle$>" width="80" height="80"/>
</a>
</MTElse>
</MTIf>
</div>
<h2><$MTEntryTitle$></h2>
<p><$MTEntryExcerpt$></p>
</div>
</MTEntries>
.thumlist { clear: both; }
.thum {
display: inline;
float: left;
margin-right: 10px;
overflow: hidden;
vertical-align: middle;
width: 80px;
height: 80px;
}
ここでは画像の縦横を80pxにしていますが、そこは100pxにしたり、50pxにしたり、お好みで。マークアップもお使いの環境に合わせて。これはあくまでも組み方の一例ですので、それぞれのデザインに合わせてカスタマイズされるといいと思います。
！ポイント！
<MTEntryAssets>をフルに活用するには、必ず画像が<form mt:asset-id="xx" class="mt-enclosure mt-enclosure-image">～</form>で囲われており、画像と記事がデータベース内でしっかり紐付けられている必要があります。それが出来て初めて画像管理のフル自動化が可能になりますので、上手く活用してみて下さい。
コメント
ＴＡＥＫＯ様
こんなに早く記事にしていただいて本当にありがとうございます！
早速で申し訳ありませんが･･･質問させてください。
目印にする文字列(aaaaa)ですが、ブログ記事作成時に、カスタムフィールド等で、
本文中のどこかに書き込むようにするという事でしょうか･･･
それと、form mt:asset-id="xx"の部分をどうするものか悩んでいます。
初歩的な質問ですみませんがどうぞよろしくお願いします。
この度は本当にありがとうございました。
こんにちは。^^
＞目印にする文字列
下手に中途半端な説明をつけたおかげでかえって混乱させてしまったようで申しわけありません。
目印付けはMTタグ内で行っていますので、ブログ記事作成時には何も余計なことをする必要はないですよ。もちろんカスタムフィールドも作る必要はありませんのでご安心下さい。
このままコピペするだけで目的の動きをするはずですので、お試し下さい。
記事ももう少し分かりやすくなるよう修正してみました。
＞form mt:asset-id="xx"の部分
画像挿入時にMTが書き出すタグはどこも変えないで下さいね。そのまま使って下さい。間違っても自己判断で勝手にform mt:asset-id="xx"の部分を消すなんてことはしないように！ この部分で画像と記事の関連付けが行われていますので、これを消すとこのカスタマイズは動作しなくなります。ご注意下さいね。
http://taeko.w-museum.com/wing/200709200024.html
↑こちらでform mt:asset-id="xx"の詳しい説明をしていますのでご覧下さい。
ＴＡＥＫＯ様
できました！
解りやすく説明していただき、本当にありがとうございます。
望みどおりの形になって感激しています。
それで･･･度々すみませんがもうひとつ質問させてください。
画像があるのにNoImage画像が表示されてしまっている記事がありまして、それらをよく見ると、
img class="mt-image-none" height="300" alt="unsuku080129.JPG" width="400" src="http://Mysite.com/arowana/DSC00008-thumb-400x300.jpg"
というように、img class="mt-image-none"となっていました。
なぜ、ちゃんとform mt:asset-id="xx" class="mt-enclosure mt-enclosure-image"でくくられてるものと、そうでないものが出来てしまうのでしょうか・・・。
記事に画像を挿す時の注意点のようなものがあるのでしょうか。
それから、サムネイルが表示されなかったページの画像のタグを修正したいのですが、mt:asset-id="xx"は、どこを見たら解るのでしょうか。
質問攻めで本当にすみません;;
どうかよろしくお願い致します。
ごめんなさい、↑↑意味不明な質問になってしまいました；；
よく見るとサムネイルが表示されない画像は、＜form でくくられていないようでした。
私がきっと、なにかの拍子に消しちゃったんでしょうね・・・；；すみません。
imgタグ内のclass名は画像表示には関係ないです。imgタグが<form>で囲われていることが大事なので。
＞mt:asset-id="xx"は、どこを見たら
画像を挿入し直せばmt:asset-id="xx"が入った正しいタグが出てきます。画像挿入のボタンをクリックすると過去にアップした画像が一覧になって出てきますから、入れたい画像にチェックを入れて記事に挿入し、<form>のなくなった画像タグと入れ替えて下さい。
あとはcssでお好きな形になるようにデザインを整えて下さいね。^^
画像、挿入し直しました。
ありがとうございます！
色々聞いてばかりで･･･すみません；；
アップ画像以外の、たとえば記事中の広告バナーや外部リンク画像をサムネイル表示したい場合には使えますでしょうか。
<MTEntryAssets>はMTでアップしてデータベースに登録された画像しか拾えないので、広告バナーや外部リンク画像のサムネイル化は無理だと思います。
ただ、広告バナーや外部リンク画像のサムネイル化は、著作権の面から考えると問題ある気がしますので、やらない方が無難だとは思います。そういうことでよろしくです。
そうですよね、著作権の問題がありますよネ。
色々とお世話になりました。
他の記事も参考にさせていただきまして、とても勉強になりました。
ありがとうございました！
私の記事でお役に立てたなら嬉しいです。
これからもよろしくお願いします。^^
こんにちは、以前もお世話になりましたー。その節はありがとうございました。
ちょっとずれちゃうんですけど、asset便利だなー、なんて早速使ってたんですが、記事で画像挿入ボタン押すと500エラーが出るようになってしまって、困ってます、、アイテムの一覧も同様。。。同じようなこと起こってませんか？？あ、ver4.1です。
＞さじさん
こんにちは。
うーん、うちではそういう現象はないですね…。画像アップ作業もサクサクと快適に動作しています。
サーバーはXREAでMySQL（5系）で4.1を動かしてます。
さじさんのところはロリポップですよね。ロリポップで画像をアップすると500エラーという話、助け合い掲示板で出ているようですが、サーバーと関係あるのでしょうか？
http://lolipoking.lolipop.jp/cgi/patio.cgi?mode=view&no=4877
不思議ですね。
ありがとうございますー。
私も検索でそこにたどり着きましたが解決できず...
別のレンタルサーバでも違うページで500エラーに見舞われまいってますー。。。
DBとかperlのバージョンなんでしょうかね。。
もう少し様子見てみます。
ありがとうございましたー。
＞さじさん
やっぱりサーバー環境に関係しているんでしょうかね…。
早く原因が分かって解決するといいですね。