私としては、記事本文に記述される画像へのパスはサイトのURLとは切り離して考えるべきと思っているので、以下のプラグインを使っています。
imageref
# Bloxsom Plugin:ImageRef
# Author: Yasuhiro Matsumoto
# Version: 0.1
package imageref;
use strict;
my $images_url = "http://mattn.kaoriya.net/images";
sub start {1}
sub story {
my ($pkg, $path, $filename, $story_ref, $title_ref, $body_ref) = @_;
$$body_ref =~ s@<!--\s+imageref\s+thumb:([^:\. ]*)(\.\S+)?\s+-->@<a href="$images_url/$1$2" rel="shadowbox"><img src="$images_url/$1-thumb$2" alt="$1" border="0" /></a>@ig;
$$body_ref =~ s@<!--\s+imageref\s+thumb:([^:]+?):([^:\. ]*)(\.\S+)?\s+-->@<a href="$images_url/$2$3" rel="shadowbox"><img src="$images_url/$2-thumb$3" alt="$1" border="0" /></a>@ig;
$$body_ref =~ s@<!--\s+imageref\s+([^:\. ]*)(\.\S+)?\s+-->@<img src="$images_url/$1$2" alt="$1" border="0" />@ig;
$$body_ref =~ s@<!--\s+imageref\s+([^:]+?):([^:\. ]*)(\.\S+)?\s+-->@<img src="$images_url/$2$3" alt="$1" border="0" />@ig;
1;
}
1;
※今回の修正を含んだソースです。※少しvimの色付け変ですね...
これを使うと、記事本文に
以下の画像を見てください。<br />
<!-- imageref パンダ:panda.png -->
と書くことで
<img src="http://mattn.kaoriya.net/images/panda.png" alt="パンダ" border="0"/>
というHTMLが出力されます。例えばサイトの引越しや画像格納パスの変更で全ての記事に手直しをする必要が無くなる訳です。また、このプラグインでは
以下の画像を見てください。<br />
<!-- imageref thumb:パンダ:panda.png -->
と書く事で
<a href="http://mattn.kaoriya.net/images/panda.png"><img src="http://mattn.kaoriya.net/images/panda-thumb.png" alt="パンダ" border="0"/></a>
と変換してくれる為、使い手側は「panda.png」とサムネイル画像「panda-thumb.png」を用意しておけばいい事になります。実際は、「panda.png」から「panda-thumb.png」への画像変換は手作業で
convert panda.png -resize 300x200 panda-thumb.png
※convertはImageMagick付属コマンドとやってるのですが、ここも本当はオートメーション化したいと思っています。
で、今回はこのプラグインを紹介したかったのではなく、jQueryでサムネイル画像から実画像への表示をビジュアルに表現してくれる「Shadowbox」というプラグインを導入しました。
mjijackson » Shadowbox 1.0 releasedなぜ導入に至ったかというと、このimagerefプラグインを少し修正すれば簡単にShadowboxが使えるのでは無いかと思ったからです。
Shadowboxを使うためには、jqueryのロードは必要になります。そして初期化処理として
<script type="text/javascript"><!--
$(document).ready(function() {
Shadowbox.init();
});
--></script>
というコードを書き、あとは
<a src="xxx-big.jpg">
<img src="xxx-small.jpg"/>
</a>
となっている部分に「rel="shadowbox"」を足して
<a src="xxx-big.jpg" rel="shadowbox">
<img src="xxx-small.jpg"/>
</a>
とすれば良し。class属性ではなく、rel属性を使っているので少し気味が悪い気もしますがそんなの気にしない。
今回はこれをimagerefが勝手に出力してくれる様に修正したまでです。
これでいつも通りにimagerefを使えば
<blockquote>
<!-- imageref thumb:giraffe-photo.jpg -->
</blockquote>
でとなる訳です。
ちなみにこのShadowbox、画像だけでなく
twtter - mattnといったインラインHTMLやFlash、動画もサポートしている様です。結構手軽に導入出来る割に得られる効果が大きいかもしれません。
一度使って見られてはどうでしょうか？
関連記事
MOONGIFT: » クールに表示「Shadowbox.js」:オープンソースを毎日紹介
追記
shadowboxやめてjquery.lightbox(balupton edition)にしました。
