こことは別のブログで画像のランダム表示をやってみたら面白かったので、MTでランダム表示用の出力が出来るかどうか試してみました。動いたようなので、覚え書き。
試してみたのは、MTでアップした画像をサムネイルでランダムに表示させて、元画像または画像のあるエントリーへリンクを張るというものです。サムネイルは<MTAssets>または<MTEntryAssets>で自動生成させます。javascript部分は以下のサイト様を参考にさせていただきました。ありがとうございます。
eweb-design.com 「画像をランダムに表示する」
■サムネイルから画像へリンクを張るタイプ
Assetで管理されている画像をランダムに表示します。サムネイルからは直接元画像に飛びます。元画像を別ウインドウで表示したい場合などは、下部のdocument.writeのHTML部分に必要に応じてtarget="_blank"等を追加するといいのではと。
インデックステンプレートで新しいテンプレートを作り、 以下をraasset.jsという名前で保存します。何枚の画像を使うかは青字の数字の部分で指定。使いたい枚数より１つ少ない数を指定します（１０と指定したら最新から１１枚の画像がランダムに表示されることになります）。３か所とも同じ数字にすること。
＜注＞青数字はMTにアップしてる画像数より少ない数にして下さい。
サムネイルを全部正方形にするカスタマイズ入りです。サムネイルのサイズは赤字の部分で調整して下さい。
<MTAssets type="image">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<MTSetVarBlock name="push(eurl)"><$MTAssetURL$></MTSetVarBlock>
<MTSetVarBlock name="push(eimg)"><MTIf name="imgw" gt="$imgh"><$MTAssetThumbnailURL height="120"$><MTElse><$MTAssetThumbnailURL width="120"$></MTElse></MTIf></MTSetVarBlock>
<MTSetVarBlock name="push(etitle)"><$MTAssetLabel$></MTSetVarBlock>
</MTAssets>
function raAsset() {
jmp = new Array();
img = new Array();
title = new Array();
<MTFor var="i" from="0" to="10">
jmp[<MTVar name="i">] = "<$MTVar name="eurl" index="$i"$>";</MTFor>
<MTFor var="i" from="0" to="10">
img[<MTVar name="i">] = "<$MTVar name="eimg" index="$i"$>";</MTFor>
<MTFor var="i" from="0" to="10">
title[<MTVar name="i">] = "<$MTVar name="etitle" index="$i"$>";</MTFor>
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' title='"+title[n]+"'>");
document.write("<img src='"+img[n]+"'>");
document.write("</a>");
}
ランダム表示させたいテンプレートの<head>～</head>内に以下を追加。
<script type="text/javascript" src="<$MTBlogURL$>raasset.js"></script>
ランダム表示させたい箇所に以下を追加。
<div class="item">
<script type="text/javascript">raAsset();</script>
</div>
サムネイルを120pxの正方形にするために以下のcssを追加。
.item {
overflow: hidden;
width: 120px;
height: 120px;
}
■サムネイルから記事へリンクを張るタイプ
エントリーに属する画像から自動でサムネイルを作ってランダム表示します。サムネイルからは該当エントリー（ブログ記事）へ飛びます。
インデックステンプレートで新しいテンプレートを作り、 以下をraimg.jsという名前で保存します。何枚の画像を使うかは青字の数字の部分で指定。使いたい枚数より１つ少ない数を指定します（１０と指定したら最新から１１枚の画像がランダムに表示されることになります）。３か所とも同じ数字にすること。
＜注＞青数字は画像のある記事数より少ない数にして下さい。
サムネイルを全部正方形にするカスタマイズ入りです。サムネイルのサイズは赤字の部分で調整して下さい。
<MTEntries lastn="0">
<MTEntryAssets type="image" lastn="1">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<MTSetVarBlock name="push(eurl)"><$MTEntryPermalink$></MTSetVarBlock>
<MTSetVarBlock name="push(eimg)"><MTIf name="imgw" gt="$imgh"><$MTAssetThumbnailURL height="120"$><MTElse><$MTAssetThumbnailURL width="120"$></MTElse></MTIf></MTSetVarBlock>
<MTSetVarBlock name="push(etitle)"><$MTEntryTitle$></MTSetVarBlock>
</MTEntryAssets>
</MTEntries>
function raImg() {
jmp = new Array();
img = new Array();
title = new Array();
<MTFor var="i" from="0" to="10">
jmp[<MTVar name="i">] = "<$MTVar name="eurl" index="$i"$>";</MTFor>
<MTFor var="i" from="0" to="10">
img[<MTVar name="i">] = "<$MTVar name="eimg" index="$i"$>";</MTFor>
<MTFor var="i" from="0" to="10">
title[<MTVar name="i">] = "<$MTVar name="etitle" index="$i"$>";</MTFor>
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' title='"+title[n]+"'>");
document.write("<img src='"+img[n]+"'>");
document.write("</a>");
}
ランダム表示させたいテンプレートの<head>～</head>内に以下を追加。
<script type="text/javascript" src="<$MTBlogURL$>raimg.js"></script>
ランダム表示させたい箇所に以下を追加。
<div class="item">
<script type="text/javascript">raImg();</script>
</div>
サムネイルを120pxの正方形にするために以下のcssを追加。
.item {
overflow: hidden;
width: 120px;
height: 120px;
}
javascriptの中に組み込むために<MTFor>ループ使ってみました。最近買った２冊の本（コレとコレ）と首っ引きで組んでみました。リストではないので実用性は低いですが、サイドバーのちょっとした飾りに使えるのではと。別ブログにしているフォトログの紹介にもいいかもですね。
MT4.1以降用です。4.0系では動かないと思います。
＜2008.6.16 追記＞
画像を重複させずに複数表示できる方法も追記しました。
サムネイルをランダムに表示させる(改) リスト可能タイプ
コメント
はじめまして。
fuと申します。
サムネイルの画像をランダムで表示したいと思いこちらを参考にさせていただきました。
ありがとうございます。
質問なのですが、複数の画像を表示するには
どのようにすればいいのでしょうか？
タグを表示させたい位置に複数表記してみると
同じ画像がでてきてしまいます。
お手すきのときにご回答いただけましたら
幸いです。
どうぞよろしくお願いいたします。
こんにちは。
fuです。
自己解決しましたのでご報告いたします。
raimg.js内の
document.write３行をそれぞれランダムの値を取得して複数表記したところ
複数の画像を表記することができました。
そこで、また壁にぶつかってしまったのですが、
同じエントリーの画像は、
すべて同じasset-idが割り振られてしまうのですが、
これは、こちらの問題なのでしょうか？
何かご存知でしたらご教示いただけましたら幸いです。
どうぞよろしくお願いいたします。
こちらこそ初めまして。
すみません、ちょっと留守にしておりまして、お返事遅れました。
…の間に解決されたのですね、よかったです。
＞同じエントリーの画像は、すべて同じasset-idが
これは記事を書く時に、画像の挿入で挿入される<form mt:asset-id="136"・・・の数字がその記事内ではみな同じ数字になってしまうということでしょうか？
私のところではそのような現象は出ていませんので、不思議ですね。すみません、その原因はよく分からないです。
それとも記事へリンクを張るタイプでは１つの記事につき１つのサムネイルしか作成されないということを言われているのでしょうか？
これはlastn="1"で１つの記事に複数画像があってもそのうちの１つしかサムネイルにしないよう制御してますので、lastn="1"をとれば記事内に含まれる全ての画像がサムネイルになります。そういうこととは違うのでしょうか？
TAEKOさま
お返事いただきありがとうございます！
aseet-idが同じになってしまうのは
こちらのlightboxで設置時に設定したIMAGE.PMが影響していたようでして
修正したところ同じエントリー内でも
異なるasset-idが割り振られるようになりました。
お騒がせいたしました。
質問させてください。
raimg.js内の更新はどういったタイミングで行われるのでしょうか？
どうぞよろしくお願いいたします。m(_ _)m
aseet-idの件、解決できてよかったです。
＞raimg.js内の更新
インデックステンプレートで作られていると思いますので、「インデックステンプレートを再構築するとき、このテンプレートも再構築する」にチェックを入れて下さい。そうすると新しい投稿があるたびに自動で再構築されます。よろしくです。
はじめまして。
MTで現在サイトを作成していて、画像をランダムに表示したいと思っていたところ、こちらを見つけました。
こちらを参考に、画像をランダムに表示させることはできましたが、画像が重複して表示されてしまいます。
fuさんは、
>raimg.js内の
>document.write３行をそれぞれランダムの値を取得して複数表記したところ
>複数の画像を表記することができました。
とおっしゃられていますが、javascriptをどのように変更すれば良いのかわかりません。
ご教授いただけるとうれしいです。
よろしくお願いします。
＞PA-DDさん
こちらこそ初めまして。
私もjavascriptはそんなに詳しくないので、こういうことかなと思ったんですが･･･。
=挫折（笑）=
すみません、私の頭ではこのスクリプトのままでは重複させないで表示させることは難しいようなので、重複しないスクリプトを探して新しくエントリー書き起こしました(^^;。
http://wing.w-museum.com/200806162021.html
参考になれば幸いです。
＞TAEKOさん
ご返信ありがとうございます。
早速試してみたところ、うまくいきました！
新しいエントリーも細かく説明されていて、すごくわかりやすかったです。
ありがとうございました！
＞PA-DDさん
上手く出来たようでよかったです。^^
おかげで私もいいスクリプト見つけられました。
画像を重複させずに複数表示させたい需要ってたくさんあると思います。