携帯 カスタマイズ vol.33

moblogのサムネイルを数個ランダムで表示させる
概要表示のmoblogのアーカイブから画像を抽出させてみる

moblog関連の表示のさせ方を見直す事にしました。何故かというとサイドのmoblog表示をMTRandomEntriesというPluginを使ってランダムで一件表示させてた訳ですが、何だかこうさぎと見た目が一緒だし、何件か表示させてた方が面白いと思ってちょっといぢったんです...楽勝かと思って......。

サイドのmoblogのところのテンプレートの表示件数を増やしてCSSで回り込みさせてみたんですが、Safariではバッチリだったのですが、他のブラウザだとどうも上手く行きません。それは表示件数を9件とかにすると顕著に表れて何か変なスペースが入って、段々になってしまいます。
「なんぢゃね、これ？」って感じで、ソースを見たところpタグがどうも原因っぽい。moblogの投稿の際に付いちゃうのかなぁとか思いましたが、他の記事にも付いてます。
！
あぁ、Convert Line Breaksという自動改行を指定してるからなんですね。
本文をCSSで消してるだけだから、それが駄目みたいです。
このpタグがかなりやっかいでなかなか上手い事行きません。自動改行使わないなら出来るんですけれど、moblogの時に携帯で<br>打つの凄く面倒だし...何とかこのまま出来ないものか試行錯誤しましたが、力尽きてしばらく放置してました（苦笑）。

んで、色々検索したりしてたらCollect Pluginというのを使えば特定のタグだけ抽出出来るみたい。何か昔に使おうとして理解出来なかったような記憶もありますが、これしか方法はないだろうと思い試してみる事にしました。

とりあえず、説明読んでも全く分かりません、大体英語も分かりませんし（笑）。
解説されてるサイトがございました。

bird.dip.jp Collect Plugin

テンプレート見てもいまいちCollectタグの効果が分かりません。まぁ、いぢってれば分かって来るだろうと思いやってみました。

おぉ！見事にカテゴリー”moblog"の画像だけを取り出すのに成功。MTRandomEntriesも使ってるのでランダム表示も大丈夫。やっと理想の形になったような気がします、ニヤニヤ。
テンプレートはこんな感じになりました。

<div class="photo">

<MTRandomEntries category="Moblog" lastn="3">

<MTCollect tags="img">

<MTCollectThis show="0">

<$MTEntryBody$>

</MTCollectThis>

<MTIfCollected tags="img">

<MTCollected tags="img" lastn="1">

<a href="<$MTEntryLink$>">

<img src="<$MTCollectedAttr attr="src"$>" border="0" 

alt="<$MTCollectedAttr attr="alt"$>" />

</a>

</MTCollected>

</MTIfCollected>

</MTCollect>

</MTRandomEntries>

</div>

自分もいまいち各タグについては理解出来てませんが、このテンプレートだと、

<MTRandomEntries category="Moblog" lastn="3">
で、カテゴリー"moblog"の3件をランダムで表示、

<MTCollect tags="img">
で、Collectはimgタグが付いてる物を抽出、

<MTCollectThis show="0">
で、エントリーの内容は表示しない、

<MTIfCollected tags="img">
で、<MTCollect></MTCollect>の中にimgタグがあれば、

<MTCollected tags="img" lastn="1">
で、imgタグが付いてるのを抽出するのは最新の一件、

<img src="<$MTCollectedAttr attr="src"$>" border="0" alt="<$MTCollectedAttr attr="alt"$>" />
で、imgファイルのパスを指定しつつ、画像の枠はなし、altで名前を付ける、

といった感じになってるんだと思います（多分）。
lastnの意味が少し間違え易いかも知れませんね。

後は、CSSで調整して完了でした。これだと、前々からやりたかったCategory Archiveでmoblogの時だけ画像を表示させる事も出来るんじゃないの？とふと思いました。というか前も思っててやり方分からず断念してました（苦笑）。

<MTCollectThis show="0">を使えば、エントリーを表示させずに画像だけ抽出出来るのが分かったので、何とか出来そうな感じがしました。Categoryのテンプレートを見て色々試行錯誤した結果見事？成功した模様です。何だかかなり強引っぽいですが...（汗）。

<MTEntries>

.

.

.

<MTCollect tags="img">

<MTCollectThis show="0">

<$MTEntryBody$>

</MTCollectThis>

<MTIfCollected tags="img">

<MTCollected tags="img"  lastn="1">

<MTEntries category="Moblog">

<div class="catmob-thumb">

<img src="<$MTCollectedAttr attr="src"$>" />

</div>

</MTEntries>

</MTCollected>

</MTIfCollected>

</MTCollect>

<$MTEntryExcerpt convert_breaks="1"$>

.

.

.

</MTEntries>

うちの場合はArchiveを概要で表示させてるので<$MTEntryExcerpt convert_breaks="1"$>をCollectで挟んでもimgタグを抽出させる事が出来ませんでした。
そこで概要の上に<$MTEntryBody$>を入れてそれを挟んでみたら上手く行きました。
でもそのままだと当然、他のカテゴリーのimgタグのあるエントリーの画像も表示してしまうので、かなり不格好になります（サイズがまちまちな為）。

特定カテゴリーだけ抜き出すCollectタグがあるのか分からないので小一時間ほど考えた結果、<MTEntries>をCollectタグの中にもう一つ入れてカテゴリーを指定してみました。良いんだろうか？（笑）

入れる場所が結構重要で場所によっては最新の一件になったり、全てのmoblogのimgを取り出したりしてしまいます。imgタグの前後で挟むと上手く行くようです。

これで他のカテゴリーは<$MTEntryExcerpt convert_breaks="1"$>だけ表示されます。
あとは、CSSで調整します。

こんな感じになります。

何かゴーリゴーリの力業ですけど、やっと念願叶いました。
概要の文字数って制限出来ないのかしら？設定のはトラックバックののみっぽいし...むぅ...。
というか、またリニューアルそっちのけで脱線しまくってますわ（泣笑）。