Let's enjoy MODx
MODxでCMSの恩恵を賜りつつ、validを保ち、かつWEB標準化を目指そう
Welcome !! Now 2008.07.25 16:26 (JST)
directResize (0.5)
[ プラグイン ]
directResize は、ドキュメントの中で指定した画像のサイズ(width / height)でサムネイルを作成します。
基本的に、assets/images以下に保存された画像をドキュメント上で利用する際、オリジナル画像より小さいサイズ(width / height)を指定した場合、すべての画像のサムネイルを作成しますが、サムネイルの作成を一部のディレクトリ内の画像に限りたい場合は、設定により、ターゲットディレクトリを指定できます。また、サムネイルの作成先は、assets/images フォルダ以下の任意の場所を指定できます。
WEB上で、サムネイルをクリックしたときの動作を lightbox に指定することも可能です。
リッチテキストエディタ、および、プレーンテキストエディタで利用可能です。
参照ページ：directResize
このドキュメントの更新履歴
テスト環境
- サーバ：さくらインターネット
- PHP 4.4.4
- MYSQL 4.0.27
- サーバ：XREA
- PHP 5.2.3
- MYSQL 5.1.20-beta
- MODx： 0.9.6
- directResize (0.5)
コードの入手
参照ページ：directResizeからダウンロードできます。
インストール
- ダウンロードしたファイルを解凍します
- 以下の３つのファイルが現れます
- directResize.php
- directResize.plugin.php
- install.txt
- 「
assets/plugins/」の下に「directresize」というディレクトリを作ります - その下に「
directResize.php」をアップロードします - 「
assets/images」以下に「cache」という名前で、サムネイルの保存先のディレクトリを作成します（別名でも可。パラメータ「$path」参照）。 - 「
assets/images」以下にサムネイル化する画像を保存するディレクトリを作成します「例：assets/images/big」。※この作業は必須ではありません。「assets/images」以下の画像すべてをサムネイル化の対象にする場合は作成しなくてかまいません。 - 手順「5.」「6.」で作成したディレクトリのパーミッションを書き込み可能なパーミッションに変更します（「707、757、777」など、各サーバー環境に沿って設定してください）。
- 管理画面で新しくプラグインを作成します
- プラグイン名：directresize
- PHPコード：「directResize.plugin.php」の内容を貼り付けます（※先頭の「
<?php」と最後の「?>」は、貼り付けたコードから削除してください。また、コード中のコメント行の中に数箇所文字化けしているところがあるかもしれません。あれば取り除きます）。 - イベント：OnWebPagePrerender
- 目的の設定となるよう、プラグインコードの中のパラメータを書き換えます
パラメータ
$path
サムネイルの保存先を指定します。デフォルト「assets/images/cache」
$prefix
サムネイルのファイル名につける接頭辞を指定します。デフォルト「page_」
$r
リサイズのルールを指定します。以下を指定できます。
- 0 ：指定した width と height によってリサイズします
- 1 ：指定した width を基準に、縦横の比率を保ってリサイズします
- 2 ：指定した height を基準に、縦横の比率を保ってリサイズします
- 3 ：指定した width と height のうち、どちらか小さい方を基準に、縦横の比率を保ってリサイズします
- 4 ：指定した width と height のうち、どちらか大きいほうを基準に、縦横の比率を保ってリサイズします
デフォルト「0」。
インスタンス
- オリジナルサイズ
<img src="assets/images/big/xxxx.jpg" width="400" height="300">-
- 0 ：width / height ... width と height でリサイズ
<img src="assets/images/big/xxxx.jpg" width="150" height="90">-
- 1 ：width ... width を基準に、縦横比を維持してリサイズ
<img src="assets/images/big/xxxx.jpg" width="150" height="90">-
- ※
width="150"を基準にリサイズ - 2 ：height ... height を基準に、縦横比を維持してリサイズ
<img src="assets/images/big/xxxx.jpg" width="150" height="90">-
- ※
height="90"を基準にリサイズ - 3 ：width or height(min) ... どちらか小さい方を基準に、縦横比を維持してリサイズ
<img src="assets/images/big/xxxx.jpg" width="150" height="90">-
- ※
height="90"を基準にリサイズ - 4 ：width or height(max) ... どちらか大きいほうを基準に、縦横比を維持してリサイズ
<img src="assets/images/big/xxxx.jpg" width="150" height="90">-
- ※
width="150"を基準にリサイズ
$q_jpg
JPEG のクォリティを「0（低）-100（高）」で指定します。デフォルト「90」。
$q_png
PNG の圧縮度を「0（低）-9（高）」で指定します。デフォルト「0」。
$lien_base
リサイズする対象となる画像を含むディレクトリを指定します。デフォルト「assets/images（images 以下の画像がすべてリサイズの対象になります）」
対象を限定したい場合、ディレクトリを指定します。「例：assets/images/big」
$lien_plugin
プラグインの外部リソースへのパスを指定します。デフォルト「assets/plugins/directresize/directResize.php]。
$lightbox
画像の表示の仕方で「lightbox」を利用するかどうかを指定します。以下を指定できます。
- 0 ：lightbox を使用しません。サムネイルをクリックすると大きい画像を表示します。
- 1 ：img タグのなかに「lightbox」という単語を持つ画像のみ、lightbox を使用します。「指定例：
<img class="lightbox" />」。 - 2 ：オリジナルの画像サイズより、小さいサイズを指定しているすべての画像に対して lightbox を使用します
デフォルト「1」
$lightbox_w
lightbox で表示する画像の最大幅を指定します。ここで指定した横幅より、横幅の大きな画像は、縦横比が維持されたまま、横幅がこのサイズにリサイズされます。デフォルト「700(px)」
$lightbox_h
lightbox で表示する画像の最大の高さを指定します。ここで指定した高さより、高さの高い画像は、縦横比が維持されたまま、高さがこのサイズにリサイズされます。デフォルト「500(px)」
利用する
- 「
assets/images」以下にファイルをアップロードします- サムネイル化する画像を一部のフォルダ内に限定したい場合は、「
$lien_base」で指定したフォルダにアップロードします
- サムネイル化する画像を一部のフォルダ内に限定したい場合は、「
- ドキュメント内で、「1.」でアップロードした画像を指定します
- 例：
<img src="assets/images/big/xxxx.jpg" width="150" height="90">
- 例：
- ドキュメントを保存します。
- ドキュメントを表示すると、プラグインの設定にしたがい、画像がリサイズされて表示されます
- サムネイル画像をクリックすると、元の画像を表示します
lightbox で表示する
lightbox を利用するには、lightbox 用のスクリプトが必要です。「Lightbox2」の「Download」より、ダウンロードできます。
ダウンロードしたスクリプトを以下の手順で設置します
- 解凍すると以下のファイルが同梱されています
- [css]
- [images]
- [js]
- index.html ... 説明
- 「lightbox.js」が参照する画像のパスを変更します(65行目～66行目付近)
var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif";↓
var fileLoadingImage = "assets/js/lightbox_js/images/loading.gif"; var fileBottomNavCloseImage = "assets/js/lightbox_js/images/closelabel.gif";※それぞれの環境に合わせて、パスを変更してください
- 正しい場所にファイルをアップロードします（上記の例ならば、「
assets/js/lightbox_js」以下） - lightbox を利用したいドキュメントに使用するテンプレートの<head>～</head>に以下の４行を追加します
<script type="text/javascript" src="assets/js/lightbox_js/js/prototype.js"></script> <script type="text/javascript" src="assets/js/lightbox_js/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="assets/js/lightbox_js/js/lightbox.js"></script> <link rel="stylesheet" href="assets/js/lightbox_js/css/lightbox.css" type="text/css" media="screen" />※それぞれの環境に合わせて、パスを変更してください
slimbox で表示する
lightbox を利用するには、slimbox(ex) 用のスクリプトと mootools.js が必要です(mootools.jsは、MODx096の場合標準で同梱されています)。
※尚、本家のslimbox は、XML宣言をするとIEで動作しないようなので、改良版を利用しています※
ダウンロードしたスクリプトを以下の手順で設置します
- slimbox_ex_070221.zip を解凍すると以下のファイルが同梱されています
- [style]
- [images]
- [script]
- 以下のファイルをアップロードします（「assets/js/slimbox_ex/」以下で良いでしょう）
- slimbox_ex の[images] 以下の*.gif ファイルすべて
- [style] 以下の slimbox_ex.css
- [script] 以下の *.js すべて
- slimbox を利用したいドキュメントに使用するテンプレートの<head>～</head>に以下の3 行を追加します
<script type="text/javascript">var MODX_MEDIA_PATH = "media";</script> <script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script> <script type="text/javascript" src="assets/js/slimbox_ex/scripts/slimbox_ex.js"></script> <link rel="stylesheet" href="assets/js/slimbox_ex/styles/slimbox_ex.css" type="text/css" media="screen" />※それぞれの環境に合わせて、パスを変更してください
カスタマイズ
「img」タグに「width」と「height」を含める
このプラグインを利用して作成したサムネイルの「img」タグには「widht」と「height」が出力されません。「width」と「height」も出力するように改造してみます。
「directResize.php」を以下のように変更します。
$lienFinal = $img_min_path_name;
} else {
$lienFinal = $img_src;
}↓
$lienFinal = $img_min_path_name.'" width="'.$img_min_w_calc.'" height="'.$img_min_h_calc;
} else {
$lienFinal = $img_src.'" width="'.$img_src_w.'" height="'.$img_src_h;
}
