20July
2004
: TuesdayID-252

携帯 カスタマイズ vol.33

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

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

iPod U2

サイドの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で調整します。

こんな感じになります。


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



  • so-su :
  • 08:40 PM
PingURL : http://gamania.s22.xrea.com/x/mt-tb.cgi/263

Comments

Post a Comment


*

*



コメントをして頂くには、*が必須です。
登録して頂いたメールアドレスは、blog上に表示されませんのでご安心下さい。

名前、アドレスを登録しますか?





タグは使えません。
http:// から始まるアドレスは自動でリンクされます。
「投稿」ボタンで送信した後、稀に送信エラーが起きる場合がありますが、ほとんどの場合が既に投稿済みですので気にしないで下さい。
再度「投稿」すると二重投稿になります。