IImage-browser の機能概要
IImage-browser プラグインは、画像をアップロードするプラグインです。以下のことができます。
- アップロード時に指定サイズのサムネイルを同時にできます。
- サブディレクトリを生成できます。
- ボタン1つで記事への画像タグの挿入が可能です。
- サーバから選択されたファイルを削除することができます。
- 画像をサーバにアップロード後、サムネイルを作成することができます。
WP v2.1以降では、投稿画面が「ビジュアル」と「コード」の切り替えが可能なので、ビジュアルリッチエディタをOFFにしないと使用できなかったIImage-browserも「コード」に切り替えて起動させることができます。v2.0系でも使用可能です。(ただし、ビジュアルリッチエディタをOFFにする必要があります)
本家サイト: skriker » IImage browser
IImage-browser のインストール方法
- IImage-browser 日本語版をダウンロードし、解凍します。「defalt」と「for lightbox」の2種類のプラグインがありますので、どちらを使うか選びます。
- どちらを選んでも wp-admin/iimage-browser.php を設定する必要があります。
$ib_settings['real_path'] = './../wp-content/'; //URI of that directory relative to your blog URI $ib_settings['real_url'] = '/wp-content';
画像を格納するフォルダを相対・絶対パスで指定します。
(./../wp-content/ と /wp-content の部分です) - 各ファイルをそれぞれサーバにアップロードします。
- プラグインコントロールパネルでIImage-browserを有効化します。
- 投稿画面でコードに切換え、「IImage-browser」クイックタグボタンが生成されているか確認します。クリックするとポップアップウィンドウが立ち上がります。
オプション
wp-admin/iimage-browser.php は用途に合わせて細かく設定することができます。
$thumb_prefix : サムネイルを生成したときにファイル名の前につく接頭語。初期値は”_”。
$ib_settings[‘default_thumbnail_size’] : サムネイル生成サイズ。初期値は”250”px。
$ib_settings[‘max_filesize’] : 最大転送可能サイズ。初期値は”8192”KB。
$ib_css_class : class属性指定。ここに書き込んでおくと指定しなくてもclass属性がタグに加えられる。
$ib_roadtrip : lightboxを使用し、複数の画像をグループ化する場合に指定する属性値。ここに書き込んでおくと指定しなくてもrel属性がタグに加えられる。
for lightbox の変更点
Liteboxはlightbox2よりも若干動作が軽いのでこのサイトではプラグインではなく、テーマに組み込んであります。それにより画像をよりクールに表示する効果を与えてくれますが、rel属性をタグに加えなければなりません。いちいち投稿のたびに書き込むのも面倒なので、IImage-browserを改造してみました。
サムネイル画像をクリックすると「表示方法」のメニューが現れます。2番目の「サムネイルをlightboxを使用して表示する」を選択し、alt属性、cssクラス名を指定(しなくても可)して「コード生成」をクリックするとrel=”lightbox”を追加したタグがテキストエリアに表示されます。v1.5.2よりalt属性を入力すると同時にtitle属性も追加され、画像にタイトルが入ります。
3番目の「lightboxを使用して画像をグループ化する」を選択し、alt属性、cssクラス名を指定(しなくても可)後、グループ化のrel 属性値に”example”と書き込むとrel=”lightbox[example]”という風になります。この属性が加えられた複数の画像がアルバム風に表示することができるわけです。
カスタマイズや問題点
- 詳しい使用方法は【再】IImage-browser(日本語版)にあります。
- 30行目 $thumb_prefix のサムネイルファイルの接頭語は旧バージョンのものを引き継ぐこと。変えるとサムネイルのリンクが切れる。サムネイルと元画像が表示されてしまう。
- Xreaで使用する場合、セーフモードのためディレクトリが生成できません。
そこで、wp-adminフォルダに.htaccessを配置するわけですが(Numb » XREA で WordPress ファイルアップロード機能を利用する を参照)、複数のファイルを適用させる書き方をメモ。
<FilesMatch "(iimage-browser|async-upload).php$"> AddHandler application/x-httpd-phpcgi .php </FilesMatch>
更新履歴
2007-03-08 for lightboxのwp-admin/iimage-browser.phpの30行目あたり $thumb_prefix = ‘thumb_’; → $thumb_prefix = ‘_’; に修正しました。
2008-01-28 v1.5.2に更新しました。