リポジトリからアドオンをインストールするプロセスについては説明しません。 既にダウンロードしてインストールしていると仮定します。
投稿を書いた理由は、公式のphpThumbOfドキュメントがひどいという事実です。 マヌスを読んだ後、表示されている画像を修正するために使用できる唯一の機能はズームクロップ(zoom-crop)であると考えました。 しかし、後で、いくつかの他のphpThumbオプションを使用しようとすると、それらがうまく機能することがわかりました!
PhpThumbOf Anatomy-出力フィルター
MODx出力フィルターを使用すると、ページに表示される直前に任意のフィルターセットを介して要素の値を実行できます。 構文は次のとおりです。
[[element:modifier = `value`]]
phpThumbOfを使用する最初で最も正しい方法は、「イメージ」タイプのTVパラメーターに追加される出力フィルターです。
ストーリーを完了するために、このようなtvパラメーターをテンプレートに追加する方法を示します。
開始するには、新しいtvパラメーターを作成し、適切と思われる名前を付けます。 私のオプション:
次に、「入力タイプ」タブで「画像」を選択します。
あとは、tvパラメーターの出力方法を指定するだけです(SRCを設定します)。
実験のために、面白い写真を選択します。 私はこれを見つけました:
ここで、作成した追加パラメーターの値として選択したカーテンをリソースで指定すると、構造を使用してリソースのコンテンツに表示できます。
<img src = "[[* tvImage]]" />
記事の冒頭で述べたように、出力フィルターはページに描画される前に要素を変更します。 tvパラメーターの値をphpThumbOf出力フィルターに渡します。
[[* tvImage :phpthumbof = `w = 120&h = 120` ]]
注:tvパラメーターをテンプレートまたはチャンクに表示する場合、アスタリスク「*」をプラス「+」に置き換える必要があります:[[+ tvImage:phpthumbof = `w = 120&h = 120`]]
その結果、リソース用に選択した画像に基づいて、120x120ピクセルにスケーリングされた新しい生成画像を取得します。 しかし、お気づきかもしれませんが、画像は元の画像の比率に違反して生じた白いフィールドに見えました。
これは非常に簡単に回避できます。幅または高さを指定しないでください。 固定幅のみを残しましょう:
[[+ tvImage:phpthumbof = `w = 120`]]
結果の画像は指定された幅でのみ拡大縮小され、高さは元の縦横比に比例します。
ご覧のとおり、画像のサイズ変更の可能性は無限に柔軟です。 幅が270ピクセルの別の例を次に示します。 さらに、元の画像以上のものを取得できますが、これは悪質な慣行です;)。
[[* tvImage:phpthumbof = ` w = 270`]]
正確な画像のトリミング
正確に120 x 120ピクセルのサイズの画像を取得したい場合は、トリミングできます。 これを行うには、トリミングオプション(zoom-crop)
&zc=1.
追加します
&zc=1.
[[* tvImage:phpthumbof = `w = 120&h = 120 &zc = 1`]]
これで、正確な寸法で白い余白のない画像のトリミングされたバージョンができました。
PhpThumbフィルター-楽しみはまだ始まったばかりです
画像サイズの制御方法がわかったので、phpThumbフィルターの真の力を紹介します。 phpThumbで使用できるフィルターの例をいくつか示します。 前の例の最後にすべての新しいフィルターを追加することに注意してください。 さらに、彼らの位置は重要です! フィルターは左から右に適用されます。
ぼかし
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = blur | 10` ]]
グレースケール(パレットをグレースケールに変換)
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = gray` ]]
角を丸くする
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = ric | 20 | 20` ]]
画像が「丸みを帯びている」場所では、画像の角が白いことに注意してください。 結果の画像をPNG形式に変換することにより、この問題を克服できます。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &f = png &fltr [] = ric | 20 | 20`]]
フレーム
定期的に、画像にフレームを追加する必要があります。 もちろん、これはCSSを使用して実行できます。 ただし、CSSが役に立たない場合もあります。 そのような例を紹介したいと思います。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &f = png&fltr [] = bord | 5 | 0 | 0 | FFFFFF&fltr [] = rot | -15 | E4F6FE` ]]
画像の回転
回転には少し説明が必要です。 隅の非グラフィック領域の背景色を指定する必要があります。 この例では、#006699、回転-45°を使用しています。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = rot | -45 | 006699` ]]
JPG =アーティファクトの数を減らしたい場合は、画質を上げることができます(1〜100)。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1&fltr [] = rot | -45 | 006699 &q = 100`]]
透明な背景が必要な場合は、前に行ったように出力をPNGに変更するだけです。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1&fltr [] = rot | -45 | &f = png `]]
カラーオーバーレイ
このフィルターを使用すると、画像に16進数の色を付けることができます。 最初の値はパーセンテージ、2番目の値は16進形式の色です。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = clr | 35 | 990033` ]]
2色の画像を取得する場合は、まずグレースケールフィルターを適用して画像の色を変更する必要があります。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = gray &fltr [] = clr | 35 | 990033`]]
シンプルなテキスト透かし。
phpThumbを使用すると、画像にテキストと画像の透かしを重ねることができます。 テキストの透かしの場合、サイズ、位置、透明度、TTFフォントを指定できます。
一般的に、利用可能なものはたくさんあります。 ドキュメントをよく理解することをお勧めします。
標準的なサーバーフォントに基づいた簡単な透かしを次に示します。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1&fltr [] = gray &fltr [] = wmt | Belafonte Code | 3 | T | FFFFFF || 100 | 20 | 0 || 0 | `]]
フィニッシュライン
おそらく私が話したかったのはそれだけです。 プロジェクトの公式ページに phpThumbの使用例があります。
PS
PSSは「MODx CMS」に移動しました