Ridimensionamento delle immagini nel CMS

Obiettivo del tutorial

Imparerai come il CMS bluetronix scala le immagini locali tramite IMG.pl durante il processo di rendering del CMS, quali sei parametri utilizza la chiamata e perché il browser riceve solo il file immagine finito.

Il CMS bluetronix ha:

IMG.pl

una funzione centrale per la scalatura automatica e la preparazione delle immagini.

IMG.pl viene utilizzato all'interno del CMS per ritagliare o scalare automaticamente le immagini durante il processo di rendering del CMS.

Importante: IMG.pl è una funzione interna del CMS bluetronix. La chiamata IMG.pl non viene fornita come URL finale dell'immagine all'utente.

Principio fondamentale

All'interno del codice HTML può essere utilizzata inizialmente una chiamata interna a IMG.pl.

Esempio:

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

Durante il processo di rendering del sito CMS, questa chiamata viene elaborata.

Il CMS genera quindi un file immagine scalato di conseguenza.

Successivamente, la chiamata originale a IMG.pl viene sostituita con il nome del file immagine appena creato.

Codice prima del rendering

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

Codice dopo il rendering

Dopo l'elaborazione, il codice HTML può apparire ad esempio in questo modo:

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

Il browser non riceve quindi la chiamata originale a IMG.pl, ma direttamente il file immagine già creato.

Flusso nel processo di rendering del 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

Ciò significa che la ridimensionamento dell'immagine non deve essere eseguita nuovamente ad ogni chiamata del browser.

IMG.pl è utilizzato solo internamente

Importante: IMG.pl è destinato esclusivamente per l'uso interno all'interno del CMS bluetronix.

IMG.pl non deve essere utilizzato come interfaccia per immagini esterne né chiamato direttamente da siti web esterni.

L'elaborazione avviene internamente durante il processo di rendering.

All'esterno viene consegnato esclusivamente il file immagine finale generato.

Le immagini devono essere presenti nello spazio web

Importante: Tutte le immagini elaborate tramite IMG.pl devono trovarsi direttamente nello spazio web dell'istanza bluetronix.

Gli URL delle immagini esterne non possono essere utilizzati come file sorgente.

È consentito ad esempio:

/img/image.jpg

Non è previsto ad esempio:

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

Il file sorgente deve essere disponibile localmente all'interno dello spazio web.

Struttura di una chiamata IMG.pl

Una chiamata tipica è:

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

I parametri vengono direttamente affiancati con:

=

separati.

Non vengono utilizzati nomi di parametri.

È fondamentale esclusivamente l'ordine dei parametri.

Panoramica dei parametri

Parametro 1 – Nome file

Il primo parametro contiene il percorso del file sorgente.

Esempio:

/img/image.jpg

Internamente, questo parametro corrisponde a:

my $f = $help[0];

Se il file sorgente specificato non esiste, il processo viene interrotto.

Nota: Senza un file sorgente locale valido, IMG.pl non può generare un'immagine.

Parametro 2 – Larghezza

Il secondo parametro determina la larghezza dell'immagine desiderata in pixel.

Esempio:

700

Internamente:

my $w = $help[1];

Parametro 3 – Altezza

Il terzo parametro determina l'altezza dell'immagine desiderata in pixel.

Esempio:

500

Internamente:

my $h = $help[2];

Parametro 4 – Proporzionalità

Il quarto parametro controlla la scalatura proporzionale o il ritaglio dell'immagine.

Esempio:

1

Internamente:

my $p = $help[3];

In questo modo si può controllare come viene trattato il rapporto d'aspetto originale dell'immagine durante la scalatura o il ritaglio.

Parametro 5 – Qualità

Il quinto parametro determina la qualità del file immagine generato per le immagini raster standard.

Esempio:

100

Internamente:

my $q = $help[4];

Di norma, questo valore è impostato su:

100

assegnato.

Parametro 6 – Zoom

Il sesto parametro controlla se un'immagine può essere ingrandita quando la dimensione di uscita desiderata è maggiore dell'immagine originale.

Internamente:

my $z = $help[5];

Con:

1

l'immagine viene ingrandita se necessario.

Esempio:

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

Senza lo zoom attivato, un'immagine troppo piccola non viene aumentata adeguatamente. La parte rimanente viene invece riempita con un bordo o uno sfondo bianco.

Esempio con tutti e sei i parametri

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

I valori significano:

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

Tipi di file consentiti

IMG.pl supporta i seguenti formati di immagine:

gif
jpg
jpe
jpeg
png
svg

Particolarità dei file SVG

Nei file SVG, il quinto parametro ha un significato speciale.

Nei formati immagine normali come JPG o PNG è:

my $q = $help[4];

la qualità dell'immagine.

Nei file SVG, questo parametro è usato come colore.

Nota: $help[4] è tecnicamente il quinto parametro passato, poiché l'array interno inizia con l'indice 0.

Pertanto, vale a dire:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

Questo consente di impostare o sostituire un colore desiderato durante l'elaborazione di un file SVG.

Mapping dei parametri interno

Internamente, i sei valori trasmessi vengono elaborati come segue:

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

Perché IMG.pl viene sostituito durante il rendering?

La chiamata interna di IMG.pl non è intesa come un URL pubblico permanente per le immagini.

Servirebbe invece come istruzione per il CMS:

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

Il risultato verrà quindi salvato come un normale file immagine.

Da:

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

diventa per esempio:

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

Il browser riceve quindi solo il file finale.

Vantaggi della scalatura delle immagini del CMS

La centralizzazione della scalatura delle immagini offre diversi vantaggi:

• 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

Riepilogo

IMG.pl è la funzione centrale interna di scalatura delle immagini del CMS bluetronix.

Una chiamata tipica è:

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

I sei parametri sono:

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

È importante:

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.

Il flusso di base è il seguente:

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