Bild-Skalierung im CMS

Ziel des Tutorials

Du lernst, wie das bluetronix CMS lokale Bilder über IMG.pl während des CMS-Site-Rendering-Prozesses skaliert, welche sechs Parameter der Aufruf verwendet und warum der Browser anschließend nur die fertig erzeugte Bilddatei erhält.

Das bluetronix CMS besitzt mit:

IMG.pl

eine zentrale Funktion zur automatischen Skalierung und Aufbereitung von Bildern.

IMG.pl wird innerhalb des CMS verwendet, um Bilder während des CMS-Site-Rendering-Prozesses automatisch auf eine gewünschte Größe zuzuschneiden bzw. zu skalieren.

Wichtig: IMG.pl ist eine interne Funktion des bluetronix CMS. Der IMG.pl-Aufruf wird nicht als endgültige Bild-URL an den Besucher ausgeliefert.

Grundprinzip

Innerhalb des HTML-Codes kann zunächst ein interner IMG.pl-Aufruf verwendet werden.

Beispiel:

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

Während des CMS-Site-Rendering-Prozesses wird dieser Aufruf verarbeitet.

Das CMS erzeugt daraus einmalig eine entsprechend skalierte Bilddatei.

Anschließend wird der ursprüngliche IMG.pl-Aufruf durch den Dateinamen der fertig erzeugten Bilddatei ersetzt.

Code vor dem Rendering

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

Code nach dem Rendering

Nach der Verarbeitung kann der HTML-Code beispielsweise so aussehen:

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

Der Browser erhält damit nicht den ursprünglichen IMG.pl-Aufruf, sondern direkt die bereits erzeugte Bilddatei.

Ablauf im CMS-Site-Rendering-Prozess

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

Dadurch muss die Bildskalierung nicht bei jedem Browseraufruf erneut durchgeführt werden.

IMG.pl wird nur intern verwendet

Wichtig: IMG.pl ist ausschließlich für die interne Verwendung innerhalb des bluetronix CMS vorgesehen.

IMG.pl soll nicht als externe Bildschnittstelle verwendet oder direkt von externen Webseiten aufgerufen werden.

Die Verarbeitung erfolgt intern während des Rendering-Prozesses.

Nach außen wird ausschließlich die fertig erzeugte Bilddatei ausgeliefert.

Bilder müssen auf dem Webspace vorhanden sein

Wichtig: Alle Bilder, die über IMG.pl verarbeitet werden, müssen sich direkt auf dem Webspace der jeweiligen bluetronix Installation befinden.

Externe Bild-URLs können nicht als Quelldatei verwendet werden.

Zulässig ist beispielsweise:

/img/image.jpg

Nicht vorgesehen ist beispielsweise:

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

Die Quelldatei muss lokal innerhalb des Webspaces verfügbar sein.

Aufbau eines IMG.pl-Aufrufs

Ein typischer Aufruf lautet:

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

Die Parameter werden direkt hintereinander mit:

=

getrennt.

Es werden keine Parameternamen verwendet.

Entscheidend ist ausschließlich die Reihenfolge der Parameter.

Parameterübersicht

Parameter 1 – Dateiname

Der erste Parameter enthält den Pfad zur Quelldatei.

Beispiel:

/img/image.jpg

Intern entspricht dieser Parameter:

my $f = $help[0];

Existiert die angegebene Quelldatei nicht, wird die Verarbeitung beendet.

Hinweis: Ohne gültige lokale Quelldatei kann IMG.pl kein Bild erzeugen.

Parameter 2 – Breite

Der zweite Parameter bestimmt die gewünschte Bildbreite in Pixel.

Beispiel:

700

Intern:

my $w = $help[1];

Parameter 3 – Höhe

Der dritte Parameter bestimmt die gewünschte Bildhöhe in Pixel.

Beispiel:

500

Intern:

my $h = $help[2];

Parameter 4 – Proportionalität

Der vierte Parameter steuert die proportionale Skalierung bzw. den Zuschnitt des Bildes.

Beispiel:

1

Intern:

my $p = $help[3];

Damit kann gesteuert werden, wie das ursprüngliche Seitenverhältnis des Bildes bei der Skalierung bzw. beim Zuschnitt behandelt wird.

Parameter 5 – Qualität

Der fünfte Parameter bestimmt bei normalen Rasterbildern die Qualität der erzeugten Bilddatei.

Beispiel:

100

Intern:

my $q = $help[4];

In der Regel wird dieser Wert auf:

100

gesetzt.

Parameter 6 – Zoom

Der sechste Parameter steuert, ob ein Bild vergrößert werden darf, wenn die gewünschte Ausgabegröße größer als das Originalbild ist.

Intern:

my $z = $help[5];

Mit:

1

wird das Bild bei Bedarf vergrößert.

Beispiel:

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

Ohne aktivierten Zoom wird ein zu kleines Bild nicht entsprechend hochskaliert. Der verbleibende Bereich wird stattdessen mit einem weißen Rand bzw. Hintergrund ausgefüllt.

Beispiel mit allen sechs Parametern

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

Die Werte bedeuten:

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

Zugelassene Dateitypen

IMG.pl unterstützt folgende Bildformate:

gif
jpg
jpe
jpeg
png
svg

Besonderheit bei SVG-Dateien

Bei SVG-Dateien besitzt der fünfte Parameter eine besondere Bedeutung.

Bei normalen Bildformaten wie JPG oder PNG ist:

my $q = $help[4];

die Bildqualität.

Bei SVG-Dateien wird dieser Parameter dagegen als Farbe verwendet.

Hinweis: $help[4] ist technisch der fünfte übergebene Parameter, da das interne Array bei Index 0 beginnt.

Damit gilt:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

Dadurch kann bei der Verarbeitung einer SVG-Datei eine gewünschte Farbe gesetzt bzw. ersetzt werden.

Interne Parameterzuordnung

Intern werden die sechs übergebenen Werte folgendermaßen verarbeitet:

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

Warum wird IMG.pl beim Rendering ersetzt?

Der interne IMG.pl-Aufruf ist nicht als dauerhafte öffentliche Bild-URL gedacht.

Stattdessen dient er dem CMS als Anweisung:

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

Das Ergebnis wird anschließend als normale Bilddatei gespeichert.

Aus:

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

wird beispielsweise:

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

Der Browser erhält damit nur die fertige Datei.

Vorteile der CMS-Bildskalierung

Die zentrale Bildskalierung bietet mehrere Vorteile:

• 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

Zusammenfassung

IMG.pl ist die zentrale interne Bildskalierungsfunktion des bluetronix CMS.

Ein typischer Aufruf lautet:

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

Die sechs Parameter sind:

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

Wichtig ist:

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.

Der grundlegende Ablauf lautet:

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