Afbeeldingsschaling in het CMS

Doel van de tutorial

Je leert hoe het bluetronix CMS lokale afbeeldingen via IMG.pl tijdens het CMS-site-rendering-proces schaalt, welke zes parameters bij de aanroep gebruikt worden en waarom de browser daarna alleen het voltooide afbeeldingsbestand ontvangt.

Het bluetronix CMS heeft:

IMG.pl

een centrale functie voor automatische schaling en verwerking van afbeeldingen.

IMG.pl wordt binnen het CMS gebruikt om afbeeldingen tijdens het CMS-site-rendering-proces automatisch op de gewenste grootte bij te snijden of te schalen.

Belangrijk: IMG.pl is een interne functie van het bluetronix CMS. De IMG.pl-aanroep wordt niet als definitieve afbeeldings-URL aan de bezoeker geleverd.

Basisprincipe

Binnen de HTML-code kan aanvankelijk een interne IMG.pl-aanroep worden gebruikt.

Voorbeeld:

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

Tijdens het CMS-site-rendering-proces wordt deze aanroep verwerkt.

Het CMS genereert daaruit een eenmalige overeenkomstig geschaalde afbeeldingsbestand.

Vervolgens wordt de oorspronkelijke IMG.pl-aanroep vervangen door de bestandsnaam van het gemaakte afbeeldingsbestand.

Code voor de rendering

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

Code na het renderen

Na de verwerking kan de HTML-code er bijvoorbeeld zo uitzien:

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

De browser ontvangt daardoor niet de oorspronkelijke IMG.pl-aanroep, maar direct het al gemaakte afbeeldingsbestand.

Afloop van het CMS-site-rendering-proces

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

Hierdoor hoeft de beeldschaling niet bij elke browseraanroep opnieuw te worden uitgevoerd.

IMG.pl wordt alleen intern gebruikt

Belangrijk: IMG.pl is uitsluitend bedoeld voor intern gebruik binnen het bluetronix CMS.

IMG.pl mag niet worden gebruikt als externe afbeeldingsinterface of rechtstreeks van externe websites worden aangeroepen.

De verwerking vindt intern plaats tijdens het renderen.

Extern wordt uitsluitend het gemaakte afbeeldingsbestand geleverd.

Afbeeldingen moeten op de webspace aanwezig zijn

Belangrijk: Alle afbeeldingen die via IMG.pl worden verwerkt, moeten zich direct op de webspace van de betreffende bluetronix-installatie bevinden.

Externe afbeeldings-URL's kunnen niet als bronbestand worden gebruikt.

Toegestaan is bijvoorbeeld:

/img/image.jpg

Niet toegestaan is bijvoorbeeld:

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

Het bronbestand moet lokaal binnen de webspace beschikbaar zijn.

Opbouw van een IMG.pl-aanroep

Een typische aanroep luidt:

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

De parameters worden direct achter elkaar geplaatst met:

=

gescheiden.

Er worden geen parameternamen gebruikt.

Bepalend is uitsluitend de volgorde van de parameters.

Parameteroverzicht

Parameter 1 – Bestandsnaam

De eerste parameter bevat het pad naar het bronbestand.

Voorbeeld:

/img/image.jpg

Intern komt deze parameter overeen met:

my $f = $help[0];

Als het opgegeven bronbestand niet bestaat, wordt de verwerking beëindigd.

Opmerking: Zonder geldig lokaal bronbestand kan IMG.pl geen afbeelding genereren.

Parameter 2 – Breedte

De tweede parameter bepaalt de gewenste afbeeldingsbreedte in pixels.

Voorbeeld:

700

Intern:

my $w = $help[1];

Parameter 3 – Hoogte

De derde parameter bepaalt de gewenste afbeeldingshoogte in pixels.

Voorbeeld:

500

Intern:

my $h = $help[2];

Parameter 4 – Proportionaliteit

De vierde parameter regelt de proportionale schaling of het bijsnijden van de afbeelding.

Voorbeeld:

1

Intern:

my $p = $help[3];

Hiermee kan worden geregeld hoe de oorspronkelijke beeldverhouding van de afbeelding wordt behandeld bij schaling of bij uitsnijden.

Parameter 5 – Kwaliteit

De vijfde parameter bepaalt de kwaliteit van het gegenereerde afbeeldingsbestand bij normale rasterafbeeldingen.

Voorbeeld:

100

Intern:

my $q = $help[4];

In de regel wordt deze waarde ingesteld op:

100

.

Parameter 6 – Zoom

De zesde parameter bepaalt of een afbeelding vergroot mag worden als de gewenste uitvoergrootte groter is dan de originele afbeelding.

Intern:

my $z = $help[5];

Met:

1

wordt de afbeelding zo nodig vergroot.

Voorbeeld:

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

Zonder geactiveerde zoom wordt een te kleine afbeelding niet overeenkomstig opgeschaald. Het resterende gebied wordt in plaats daarvan met een witte rand of achtergrond opgevuld.

Voorbeeld met alle zes parameters

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

De waarden betekenen:

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

Toegestane bestandstypen

IMG.pl ondersteunt de volgende beeldformaten:

gif
jpg
jpe
jpeg
png
svg

Bijzonderheid bij SVG-bestanden

Bij SVG-bestanden heeft de vijfde parameter een speciale betekenis.

Bij normale afbeeldingsformaten zoals JPG of PNG is:

my $q = $help[4];

de beeldkwaliteit.

Bij SVG-bestanden wordt deze parameter daarentegen als kleur gebruikt.

Opmerking: $help[4] is technisch gezien de vijfde doorgegeven parameter, omdat de interne array begint bij index 0.

Hiermee geldt:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

Hierdoor kan bij het verwerken van een SVG-bestand een gewenste kleur worden ingesteld of vervangen.

Interne parameter toewijzing

Intern worden de zes doorgegeven waarden als volgt verwerkt:

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

Waarom wordt IMG.pl tijdens het renderen vervangen?

De interne IMG.pl-aanroep is niet bedoeld als permanente openbare afbeeldings-URL.

In plaats daarvan dient het CMS als instructie:

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

Het resultaat wordt vervolgens opgeslagen als een normaal afbeeldingsbestand.

Van:

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

wordt bijvoorbeeld:

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

De browser ontvangt alleen het voltooide bestand.

Voordelen van CMS-beeldschaling

De centrale afbeeldingsschaling biedt verschillende voordelen:

• 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

Samenvatting

IMG.pl is de centrale interne afbeeldingsschalingsfunctie van het bluetronix CMS.

Een typische aanroep luidt:

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

De zes parameters zijn:

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

Belangrijk is:

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.

De basisflow is als volgt:

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