(旧)sideblue weblog | [plugin] イメージヘルパー ver 0.01

February 21, 2007

●[plugin] イメージヘルパー ver 0.01
February 21, 2007 07:58 PM written by 兼乃

イメージヘルパーは、記事編集画面などで利用できる「イメージ挿入」セレクタの形式を自由にカスタマイズするプラグインです。

ぬわんとー。すごいプラグインが公開されました。
これで拙作のThumnPopやAddrelプラグインは不要になりましたね...。

(*)プラグインのブッキングを避けるためにイメージヘルパーを利用する場合はThumnPopやAddrelの利用チェックを外したほうがよいかと思います。

ん？「イメージ挿入」の「新規」から直接ファイルをアップロードした場合、イメージヘルパーのテンプレートは適応されないみたい？
適応させるには編集メニューのアップロードから画像を追加するか、新規で直接アップロードした後、いったん挿入されたタグを消して挿入する画像を選び直すと適応されます。

さて、ついでなので挿入タグの作成が面倒なhighslide JSのテンプレートを作ってみた。

HighSlide JSを利用するための挿入タグは

<a href="イメージ画像ファイルアドレス" class="highslide" onclick="return hs.expand(this)"><img src="イメージ画像ファイルアドレス" alt="Highslide JS" title="この画像をクリックすると拡大表示されます。" width="100" heigh="100" id='thumb1' /></a>
<div class='highslide-caption' id='caption-for-thumb1'>
<p> キャプション</p>
</div>

こういうものなのだが、画像を利用するたびに作成するのは面倒。
ってことでイメージヘルパーのテンプレートを使うと

Exif情報無し

<a href="%file_url%" class="highslide" onclick="return hs.expand(this, {captionId: 'caption%file_width%%thumb_height%'})">
<img src="%thumb_url%" alt="%image_name%" title="Click to enlarge" height="%thumb_height%" width="%thumb_width%" /></a>
<div class='highslide-caption' id='caption%file_width%%thumb_height%'>
%image_name%
</div>

こんな感じになる。
(*)IDは元画像の横幅とサムネイル画像の縦幅をくっつけただけなので元画像のサイズが同じ画像の場合はIDが重複しますので注意です。

・Sample