Welcome !! Now 2010.09.04 02:17 (JST)

directResize (0.8.0.2)

[ プラグイン ]

directResize は、自動サムネイルを生成したり、画像にwatermarkを挿入したります（text or png）。JavaScriptが利用可能ならば、様々な見せ方が可能です（Slidebox, Lightbox v2.0, Slimbox, Highslide etc ）。アウトプットは、テンプレートでコントロールできます。JPGとPNGをサポートしています。

参照ページ：DirectResize

インストール

  1. ダウンロードしたファイルを解凍します。以下のフォルダが現れます
    • [assets]
  2. ftpで接続し、[assets]フォルダごとmodxをインストールしたディレクトリにアップロードします。
  3. [assets]下に「drgalleries」ディレクトリを作り、書き込み可能な属性にします（777など）。
  4. MODxの管理画面で、プラグインの作成を選び、以下の要項でプラグインを作成します。
    • プラグイン名：DirecrResize
    • プラグインコード：directResize.plugin.txt の内容。
      • コード中のコメント行の中に文字化けしているところがあるかもしれません。あれば取り除きます
    • 設定タブ＞プラグイン設定：以下を貼り付け
      • &config=Configuration;string;highslide &clearCache=Cache clear mode;list;0,1,2;0
    • システムイベントタブ：以下にチェックをつける
      • OnWebPagePrerender
      • OnCacheUpdate
      • OnBeforeDocFormSave
      • OnDocFormPrerender

プラグイン設定

キャッシュクリアモードオプション

システムのキャッシュのクリアが行われたときのプラグインの動作を指定します。

  • 0 - キャッシュクリアしません
  • 1- リソースを保存したときのみキャッシュをクリアします。
  • 2- すべてのリソースのキャッシュをクリアします。

Configuration

「configfile」の中のファイルのファイル名の部分を指定します。

デフォルト「highslide」。以下が指定できます。

  • slimbox
  • slidebox
  • lightboxv2
  • highslide

簡単な使い方

  1. リソースを新規に作り、画像をアップロードします。
  2. 希望するサムネイルのサイズに画像を縮小します。
  3. リソースを保存します。
  4. プレビューで確認できます。

画像のプレビューは、デフォルトで、「highslide」が指定されています。

パラメーター

$lightbox_mode

サムネイルより、画像が大きいとき、サムネイルから大きい画像へリンクを作るかどうかを指定します。

  • 1...元の画像にラベル「drlightbox」を持つもののみ、大きい画像へのリンクをつくります。それがない場合は、ただのサムネイルになります。
    • <img src="image.jpg" alt="drlightbox" />
    • <img src="image.jpg" class = "drlightbox_align_left" />
    • <img src="image.jpg" title = "drlightbox picture" />
    • <img src="image.jpg" style = "background: url(drlightbox_bg.gif);" />
    • <img src="assets/images/mydrlightboxpicture.jpg" />...など
  • 2...常に大きい画像へのリンクを作成します。

$allow_from

プラグインが利用する画像を含むフォルダをコンマで区切って指定します。デフォルトは、「assets/images」で、これ以下のすべての画像がプラグインの対象となります。１部のフォルダのみをプラグインの対象にしたりできます。下記は、「big」以下のフォルダのみにプラグインの効果が現れます。

$allow_from="assets/images/big";またリモートリソースを指定する場合、以下の様にします。

$allow_from="assets/images,http://modx.liolion.net/assets/images/big/";

$deny_from

プラグインが利用することを許可しない画像を含むフォルダ（パス）をカンマで区切って指定します。

$resize_method

リサイズの方法を指定します。 すべての場合で、縦横比は保たれます。

  • 0 – firstly image is reduced, then it is cropped to fit in the rectangle imgWidth х imgHeight （動作不明）
  • 1 – まず、高さが計算され、自動的に、幅が決められます。
  • 2 - まず、幅が計算され、自動的に高さが決められます。
  • 3 – 画像の幅、高さがあれば、元の画像がそれを越えないように縮小されます。

$big_quality

大きい画像のJPGクォリティを指定します。デフォルト「80」。1-100の整数で指定します。

$thumb_quality

サムネイルのJPGクオリティを指定します。デフォルト「80」。1-100の整数で指定します。

$wysiwyg_quality

リッチテキストエディタの中のクォリティを指定します。デフォルト「40」。1-100の整数で指定します。

$big_width / $big_height

もし、オリジナルサイズが、$big_width、big_heightより大きかったら、展開画像は、それを越えないように縮小されます。

$tpl

以下が指定できます。

  • チャンク名
  • @FILE:<path to the file>
    • 例　assets/plugins/ directresize/templates/ lightboxv2.html
  • @CODE:<HTML code of template >

$header

<head>～<head>に必要な、CSSやJavaScriptコードを挿入します。これは、DirectRisizeを使うページにのみ挿入されます。

$thumb_use_watermark

サムネイルにwatermarkを入れるかどうかを指定します。デフォルト「しない（false）」。「true」を指定すると、ウォーターマークを挿入します（原則的にサムネイルのwidthが120px以下の場合には、入らないようです）。

$thumb_watermark_txt

ウォーターマークとして挿入するテキストを指定します。出力時には、画像になります。デフォルト「Copyright <YEAR>」

$thumb_watermark_font

ウォーターマークのフォントのサイズを指定します。数が大きいほど大きい文字です。

「1～5」で指定します。デフォルト「1」

$thumb_watermark_halign

ウォーターマークの横の位置を指定します。以下が指定できます。

  • left
  • center
  • right

$thumb_watermark_img

ウォーターマークとして挿入するイメージへのパスを指定します。デフォルト「」

例

$thumb_watermark_img = DIRECTRESIZE_PATH.'images/zoom.png';

アルファチャンネルを持ったpng画像に限ります。

$thumb_watermark_type

ウォーターマークが画像の場合、指定します。

例

$thumb_watermark_type = "image";

$thumb_watermark_txt_color

ウォーターマーク（テキスト）のカラーをへキサで指定します。指定します。

$thumb_watermark_txt_hmargin

ウォーターマーク（テキスト）の横マージンを指定します。デフォルト（2px）。

$thumb_watermark_txt_vmargin

ウォーターマーク（テキスト）の縦マージンを指定します。デフォルト（2px）。

$big_use_watermark

展開画像にウォーターマークを挿入するかどうかを指定します。デフォルト「しない（false）」。「true」にすると、ウォーターマークを挿入します。

$big_watermark_font

展開画像のテキストウォーターマークのフォントのサイズを指定します。「1～5」

$big_watermark_halign

展開画像のウォーターマークの横の位置を指定します。以下が指定できます。

  • left
  • center
  • right

 $big_watermark_img

展開画像へ挿入するウォーターマークの画像のパスを指定します。

例

$big_watermark_img = "assets/plugins/directresize/images/watermark.png";

$big_watermark_type

ウォーターマークが画像の場合指定します。

例

$big_watermark_type = "image";

$big_watermark_txt

ウォーターマークとして挿入するテキストを指定します。

$big_watermark_txt_color

ウォーターマークのテキストカラーをヘキサで指定します。

$big_watermark_txt_hmargin

ウォーターマークの横マージンを指定します。

$big_watermark_txt_vmargin

ウォーターマークの縦マージンを指定します。

△ページトップ