CMSにおける画像スケーリング

チュートリアルの目的

bluetronix CMSがCMSサイトのレンダリングプロセス中にIMG.plを通じてローカル画像をスケーリングする方法、呼び出しに使用される6つのパラメータと、なぜブラウザが生成された画像ファイルのみを受け取るのかを学びます。

bluetronix CMSは以下の機能を備えています:

IMG.pl

画像の自動スケーリングと準備のための中心的な機能。

IMG.plは、CMSサイトのレンダリングプロセス中に画像を自動的に希望のサイズにトリミングまたはスケーリングするためにCMS内で使用されます。

重要: IMG.plはbluetronix CMSの内部機能です。IMG.plの呼び出しは、訪問者に最終的な画像URLとして提供されることはありません。

基本原則

HTMLコード内では、まず内部IMG.plの呼び出しを使用することができます。

例:

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

CMSサイトのレンダリングプロセス中に、この呼び出しが処理されます。

CMSは、それに基づいて一度だけ適切にスケーリングされた画像ファイルを生成します。

その後、元のIMG.pl呼び出しは生成された画像ファイルのファイル名に置き換えられます。

レンダリング前のコード

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

レンダリング後のコード

処理後、HTMLコードは次のようになります:

<img src="/tmp/img_image_700_500_1_100_1_1070.jpg">

ブラウザは元のIMG.pl呼び出しではなく、すでに生成された画像ファイルを直接受け取ります。

CMSサイトのレンダリングプロセスの流れ

HTML enthält IMG.pl-Aufruf
      ↓
CMS-Site-Rendering-Prozess
      ↓
IMG.pl wird intern verarbeitet
      ↓
Bild wird skaliert / zugeschnitten
      ↓
neue Bilddatei wird erzeugt
      ↓
IMG.pl-Aufruf wird ersetzt
      ↓
fertiger Bild-Dateiname wird in das HTML eingesetzt
      ↓
fertige HTML-Seite wird ausgeliefert

これにより、画像スケーリングを各ブラウザ呼び出しで再度行う必要がなくなります。

IMG.plは内部でのみ使用されます

重要: IMG.plはbluetronix CMSの内部でのみ使用することを目的としています。

IMG.plは外部の画像インターフェースとして使用したり、外部ウェブサイトから直接呼び出したりしてはいけません。

処理はレンダリングプロセス中に内部で行われます。

外部には生成された画像ファイルのみが提供されます。

画像はウェブスペースに存在する必要があります

重要: IMG.plを介して処理されるすべての画像は、各bluetronixインストールのウェブスペースに直接存在しなければなりません。

外部画像URLはソースファイルとして使用できません。

許可される例:

/img/image.jpg

許可されない例:

https://external-domain.com/image.jpg

ソースファイルはウェブスペース内でローカルに利用可能である必要があります。

IMG.pl呼び出しの構成

典型的な呼び出しは次のとおりです:

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

パラメータは直接続けて:

=

区切られます。

パラメータ名は使用されません。

重要なのはパラメータの順序だけです。

パラメーター概要

パラメーター1 – ファイル名

最初のパラメーターには、ソースファイルのパスが含まれます。

例:

/img/image.jpg

内部的には、このパラメーターは次のようになります：

my $f = $help[0];

指定されたソースファイルが存在しない場合、処理は終了します。

注意： 有効なローカルソースファイルがないと、IMG.plは画像を生成できません。

パラメーター2 – 幅

2番目のパラメーターは、希望する画像の幅をピクセルで指定します。

例:

700

内部的には：

my $w = $help[1];

パラメーター3 – 高さ

3番目のパラメーターは、希望する画像の高さをピクセルで指定します。

例:

500

内部的には：

my $h = $help[2];

パラメーター4 – 比率

4番目のパラメーターは、画像の比率を保ちながらスケーリングまたはトリミングを制御します。

例:

1

内部的には：

my $p = $help[3];

これにより、画像のスケーリングまたはトリミングの際に元のアスペクト比がどのように扱われるかを制御できます。

パラメーター5 – 品質

5番目のパラメーターは、通常のラスター画像に対して生成された画像ファイルの品質を決定します。

例:

100

内部的には：

my $q = $help[4];

通常、この値は次のようになります：

100

次のようになります。

パラメーター6 – ズーム

6番目のパラメーターは、希望する出力サイズが元の画像よりも大きい場合に画像を拡大できるかどうかを制御します。

内部的には：

my $z = $help[5];

次のように：

1

必要に応じて画像が拡大されます。

例:

...=700=500=1=100=1

ズームが無効になっている場合、サイズが小さい画像は適切に拡大されません。残りの部分は白い境界または背景で埋められます。

すべての6つのパラメーターを含む例

/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1

値は次のように意味します：

1. /img/image.jpg
   → Quelldatei

2. 700
   → Breite: 700 Pixel

3. 500
   → Höhe: 500 Pixel

4. 1
   → proportionale Verarbeitung / Zuschnitt

5. 100
   → Bildqualität

6. 1
   → Zoom aktiviert

許可されているファイルタイプ

IMG.plは次の画像形式をサポートしています：

gif
jpg
jpe
jpeg
png
svg

SVGファイルの特異性

SVGファイルでは、5番目のパラメータには特別な意味があります。

JPGやPNGのような通常の画像形式では、

my $q = $help[4];

画像品質です。

SVGファイルでは、このパラメータは色として使用されます。

注意: $help[4] は技術的には渡された5番目のパラメータです。内部配列はインデックス 0 から始まります。

したがって、

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

SVGファイルの処理時に、希望する色を設定または置き換えることができます。

内部パラメータマッピング

内部的には、渡された6つの値は次のように処理されます：

my $f = $help[0];  # Dateiname
my $w = $help[1];  # Breite
my $h = $help[2];  # Höhe
my $p = $help[3];  # Proportionalität
my $q = $help[4];  # Qualität / bei SVG: Farbe
my $z = $help[5];  # Zoom

なぜIMG.plはレンダリング時に置き換えられるのですか？

内部のIMG.plの呼び出しは、永久的な公開画像URLとして想定されていません。

代わりに、CMSへの指示として機能します：

Nimm dieses Bild
+
erzeuge diese Größe
+
verwende diese Skalierung
+
verwende diese Qualität
+
berücksichtige die Zoom-Einstellung

結果はその後、通常の画像ファイルとして保存されます。

例えば：

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

次のように：

<img src="/tmp/img_image_700_500_1_100_1_1070.jpg">

ブラウザには完成したファイルのみが送信されます。

CMSの画像スケーリングの利点

中央の画像スケーリングは、いくつかの利点を提供します。

• einheitliche Bildgrößen
• automatischer Bildzuschnitt
• keine manuelle Erstellung jeder einzelnen Bildgröße erforderlich
• fertige Bilddateien können direkt ausgeliefert werden
• IMG.pl muss nicht als öffentliche Bildschnittstelle verwendet werden
• die Bildverarbeitung wird zentral vom CMS gesteuert

要約

IMG.plは、bluetronix CMSの中央内部画像スケーリング機能です。

典型的な呼び出しは次のとおりです:

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

6つのパラメータは次の通りです：

1. Dateiname
2. Breite
3. Höhe
4. Proportionalität
5. Qualität / bei SVG Farbe
6. Zoom

重要なのは：

Quelldateien müssen lokal auf dem Webspace liegen.

IMG.pl ist nur für die interne CMS-Verarbeitung vorgesehen.

IMG.pl-Aufrufe werden während des Rendering-Prozesses verarbeitet.

Nach außen wird die fertig erzeugte Bilddatei ausgeliefert.

基本的な流れは次のようになります：

lokales Originalbild
      ↓
IMG.pl
      ↓
Skalierung / Zuschnitt
      ↓
fertige Bilddatei erzeugen
      ↓
IMG.pl-Aufruf im HTML ersetzen
      ↓
fertige Bild-URL an den Browser ausliefern