エントリーで使用してる画像を抜き出してポップアップ表示させてみる

エントリー内で用いてる画像を抜き出すには、MTCollectプラグインを用いる方法があります。
しかし、これは使い方が(自分には)難しいので、画像表示を簡単に行ってくれるプラグインを使用してみます。
今回は、それをただ表示させるだけでなく「最近のエントリー」みたいにリンクを表示させて、そのポップアップとして抜き出した画像を表示させる事にしました。

プラグインのDL・UL

■The blog of H.Fujimoto：エントリー内の画像をリストアップするプラグイン(その1)　[The blog of H.Fujimoto]
上記よりプラグインをDLして、MTルート/plugins 内にアップします。

あるカテゴリーだけから画像を抜き出す

<MTCategories show_empty="1">
<MTFilterCategories include="カテゴリー名">
ここに抜き出した内容
</MTFilterCategories>
</MTCategories>

上記で「カテゴリー名」のカテゴリーだけの表示になります。これに画像抜き出しを加えて・・・

<MTCategories show_empty="1"><MTFilterCategories include="カテゴリー名">
<MTEntryImages img_lastn="10">
<a href="<MTEntryImageEntry><$MTEntryPermalink$></MTEntryImageEntry>">
<img src="<$MTEntryImageSrc$>" alt="<$MTEntryImageAlt$>" width="<$MTEntryImageWidth$>" height="<$MTEntryImageHeight$>" />
</a>
</MTEntryImages>
</MTFilterCategories></MTCategories>

「カテゴリー名」エントリーの最新10件の画像表示になります。

ポップアップ表示を＋する

ポップアップさせるCSSは以下

.popup img {
	display:block;
	top:-9999px;
	left:-9999px;
	position:absolute;
}

.popup a:hover {
	position:relative;
}

.popup a:hover img{
	left: 30px;
	top: 20px;
}

「最近のエントリー」みたいな並びにして、そのタイトルにカーソル持ってくと画像が出るようにしたいので、リストタグを用いてタイトルを並べます。それに先程のポップアップ属性を付加。

<ul>
<MTCategories show_empty="1"><MTFilterCategories include="カテゴリー名">
<MTEntryImages img_lastn="10">
<li class="popup">
<a href="<MTEntryImageEntry><$MTEntryPermalink$></MTEntryImageEntry>">
<img src="<$MTEntryImageSrc$>" alt="<$MTEntryImageAlt$>" width="<$MTEntryImageWidth$>" height="<$MTEntryImageHeight$>" />
<$MTEntryTitle$>
</a>
</li>
</MTEntryImages>
</MTFilterCategories></MTCategories>
</ul>

以上。このサイトでは、カテゴリーページの右サイドバーに試しに置いてみました。表示試験してるだけですけど。
個人的にこのポップアップのさせ方好きです。
ちなみに、カテゴリーフィルターを行わない場合は「画像が入ってるエントリーを最新から10件」表示してくれます。
全てのエントリー最新の10件から、画像が入ってる場合はポップアップして、画像が存在しない場合は通常表示にしてみようかとも試みたのですが、うまく出来ませんでした。
「カテゴリー毎に」ポップアップさせるか否かは、
<MTEntryIfCategory> ～ </MTEntryIfCategory>を用いる事で出来そうです。

MTCollect利用例

最後に、最初言ってたMTCollectの利用例をひとつ書いて終了。MTCollect難しいよー；；

エントリーの概要部分に
imgタグがあれば
それを表示する

<MTCollect tags="img">
<MTCollectThis><$MTEntryExcerpt$></MTCollectThis>
<MTIfCollected><MTCollected tags="img">
<img width="x" height="y" src="<$MTCollectedAttr attr="src"$>" alt="<$MTEntryTitle$>" />
<$MTCollectedContent$>
</MTCollected></MTIfCollected>
</MTCollect>

以上。

[参考記事]
■The blog of H.Fujimoto：エントリー内の画像をリストアップするプラグイン(その1)　[The blog of H.Fujimoto]
■Lucky bag::blog: CSS で画像ポップアップ　[Lucky bag::blog]
■CSSでポップアップを実現する

2006/11/19 01:22:10追記：
エントリー内でMTタグを使えるカスタマイズを行っている場合、画像が正常に表示されない症状が出ました。
使用プラグイン：■Life on the Kernel: MT::Plugin::EvalTemplate

<$MTBlogURL$>images/filename.gif
として表示させている画像は抜き出せませんでした。MTタグを使用しなければ正常に表示。

エントリーで使用してる画像を抜き出してポップアップ表示させてみる｜Materializing [マテリアライジング]