PukiWikiで画像をサムネイルへ差し替える


投稿日:2011年11月5日
  • 2
  • 0


デジカメの画像をたくさん表示すると重い

デジカメは進化を続け1000万画素を超えるものも出ています。手軽に高画質な写真が取れるのはうれしいですが、写真ギャラリーや一覧表示をすると動作が重くなるのが難点です。

そこで「resizeimage.inc.php」。サムネイルを自動で作成してくれる心強いプラグイン。

機能としては

  1. 任意のクオリティ(圧縮率)のサムネイルを作成
  2. 一度作成したサムネイルをキャッシュとして保存することでサーバの負担を軽減
  3. ref.inc.php」と組み合わせることでwikiファイルを修正しなくても自動で運用可能

と、これ以上何を求めるのか?wといった機能を持っている。(もしも改良するなら元ファイルのタイムスタンプを監視して差し替える機能くらいか?同じ名前でアップし直すことはあまり考えづらいですが…。)


導入方法

1.こちらで「resizeimage.inc.php ver. 1.21 」と「ref.inc.php」をダウンロード。
resizeimage.inc.php ver. 1.21 」は「resizeimage.inc.php」と改名しpluginフォルダへ入れる。
ref.inc.php」の116行目あたり

$script = get_script_uri('rel');

この記述を

$script = get_script_uri();

このように変更して、pluginフォルダへ入れる。


2.キャッシュを保存するフォルダを作成する。

デフォルトではPukiWikiのルートフォルダに「thumb」というフォルダを作るだけ。別の名前のフォルダを作る必要があるなら62行目あたりに

define('RESIZEIMAGE_CACHE_DIR', DATA_HOME . 'thumb/');

というタグが用意されているので、適宜変更しよう。


設定

今回は特に変更しなかった。「resizeimage.inc.php」の数字の部分は0~100のクオリティを選べるようになっている。

define('PLUGIN_RESIZEIMAGE_DEFAULTQUALITY', '70');

図鑑としてある程度の画質は欲しいので、70のままにしておく。

サンプルはこちら「アクアリウムWiki淡水魚図鑑
多くの画像が配置されてますが、小さくリサイズした画像をキャッシュから読み込んでいるため、表示はそれほど重くないと思います。


追記:透過PNGなど、透明のプロパティを持つ画像はリサイズされる過程で透明部分が黒くなってしまう。透過PNGを使いたい場合は画像の指定をURLにしよう。「ルードディレクトリ/image」フォルダにでも入れるといいだろう。

普通透過ファイルを使うことはあまり無いので、問題ないが、もしかしたらリサイズをしない指定を出来るように改造が必要かもしれない。


現在のページを共有する



現在のページに関連する記事

PukiWikiで画像をサムネイルへ差し替える PukiWikiで5段階評価を付けるプラグインを作成しました
SyntaxHighlighterの記述方法 SyntaxHighlighterの記述方法
PukiWikiで表をソートしたい PukiWikiで表をソートしたい
PukiWikiで画像をサムネイルへ差し替える 5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法
PukiWikiで画像をサムネイルへ差し替える PukiWikiでlazysizesを利用して画像の遅延読み込みを導入する
PukiWikiへ「attachref.inc.php」と「areaedit.inc.php」プラグインの導入 PukiWikiへ「attachref.inc.php」と「areaedit.inc.php」プラグインの導入
PukiWikiで表組みデザイン PukiWikiで表組みデザイン

おすすめの記事

FuckAdBlockを利用して自由自在にAdblock対策をする方法

FuckAdBlockを利用して自由自在にAdblock対策をする方法

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法

Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法

ユーザーの環境変数を設定するbashの設定ファイルと、カスタムプロンプトについて

ユーザーの環境変数を設定するbashの設定ファイルと、カスタム…

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。