TopMovable Typeカスタマイズサイドバー > 2004年7月
2004年7月16日

エントリーの画像をサイドメニューに表示

July 16,2004 1:30 AM
Tag:[]
Permalink

エントリーに携帯等で撮った画像を表示しているブログをよく見かけますが、エントリーの画像を検索してサイドバーに自動的に表示するカスタマイズをご紹介致します。具体的な動作は、エントリーの中に書かれている img 要素の src 属性を検索し、そこで指定された画像をサイドバーに表示します。Collect プラグインというものを利用しています。
以下、手順メモです。

1.プラグインのダウンロード

Collect Plugin for Movable TypeCollect より Plugin をクリックします(ソースが表示される場合は右クリックして「対象をファイルに保存」を選択)。

2.プラグインのアップロード

ダウンロードした Collect.pl を plugins ディレクトリ直下にアップロードします。

3.テンプレート修正

リスト1のタグを、画像を表示したいテンプレート(メインページ/カテゴリーアーカイブ/日付アーカイブ/個別エントリーアーカイブ等)のサイドバー部分に追加します。次のタグは最近の8エントリーより、各エントリー内にある一番最初のイメージを表示します。

<MTEntries lastn="8">
<MTCollect tags="img">
<MTCollectThis show="0">
<$MTEntryBody$>
</MTCollectThis>
<MTIfCollected tags="img">
<MTCollected tags="img" lastn="1">
<a href="<$MTEntryLink$>">
<img src="<$MTCollectedAttr attr="src"$>" style="margin:10px" />
</a><br />
</MTCollected>
</MTIfCollected>
</MTCollect>
</MTEntries>

リスト1:最近の8エントリーより各エントリー内にある一番最初のイメージを表示

リスト2のタグは、全エントリーから最新の5個のイメージを表示します。

<MTCollect tags="img">
<MTEntries lastn="5">
<MTCollectThis>
<$MTEntryBody$>
<$MTEntryMore$>
</MTCollectThis>
</MTEntries>
<MTIfCollected>
Recent Photos of all <$MTCollectedTotalCount$> photos<br />
<MTCollected tags="img" lastn="5">
<img width="100" src="<$MTCollectedAttr attr="src"$>" alt="<$MTCollectedAttr attr="alt"$>"<$MTCollectedContent$><br />
</MTCollected>
<MTElse>
No Photos
</MTElse>
</MTIfCollected>
</MTCollect>

リスト2:全エントリーから最新の5個のイメージを表示

以上です。なおこの機能については以下のサイトを参考にさせて頂きました(テンプレートもそこからの抜粋です)。

あとはカメラ付き携帯を買うだけ(爆)。

2005.08.08 追記
本文を全面修正しました。

2006.09.10 追記
マークアップ修正。

Comments [6] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3