Redimensionnement d'images dans le CMS

Objectif du tutoriel

Vous apprendrez comment le CMS bluetronix redimensionne les images locales via IMG.pl pendant le processus de rendu du site CMS, quels six paramètres sont utilisés et pourquoi le navigateur reçoit ensuite uniquement le fichier image généré.

Le CMS bluetronix dispose de :

IMG.pl

une fonction centrale pour la mise à l'échelle automatique et la préparation des images.

IMG.pl est utilisé dans le CMS pour rogner ou redimensionner automatiquement les images à une taille souhaitée pendant le processus de rendu du site CMS.

Important : IMG.pl est une fonction interne du CMS bluetronix. L'appel IMG.pl n'est pas livré en tant qu'URL d'image finale au visiteur.

Principe de base

Dans le code HTML, un appel IMG.pl interne peut d'abord être utilisé.

Exemple :

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

Pendant le processus de rendu du site CMS, cet appel est traité.

Le CMS génère alors une fois un fichier image à la taille correspondante.

Ensuite, l'appel IMG.pl d'origine est remplacé par le nom du fichier image généré.

Code avant le rendu

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

Code après le rendu

Après traitement, le code HTML peut par exemple ressembler à ceci :

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

Le navigateur reçoit ainsi non pas l'appel IMG.pl d'origine, mais directement le fichier image déjà généré.

Déroulement du processus de rendu du site 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

Cela signifie que la mise à l'échelle de l'image ne doit pas être effectuée à chaque appel du navigateur.

IMG.pl est utilisé uniquement en interne

Important : IMG.pl est exclusivement destiné à un usage interne au sein du CMS bluetronix.

IMG.pl ne doit pas être utilisé comme interface d'image externe ou appelé directement depuis des sites web externes.

Le traitement s'effectue en interne pendant le processus de rendu.

Vers l'extérieur, seul le fichier image généré est livré.

Les images doivent être présentes sur l'espace web

Important : Toutes les images traitées par IMG.pl doivent se trouver directement sur l'espace web de l'installation bluetronix respective.

Les URL d'images externes ne peuvent pas être utilisées comme fichier source.

Autorisé par exemple :

/img/image.jpg

Non prévu par exemple :

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

Le fichier source doit être disponible localement dans l'espace web.

Construction d'un appel IMG.pl

Un appel typique est le suivant :

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

Les paramètres sont directement alignés avec :

=

séparés.

Aucun nom de paramètre n'est utilisé.

Seule l'ordre des paramètres est déterminant.

Aperçu des paramètres

Paramètre 1 – Nom de fichier

Le premier paramètre contient le chemin du fichier source.

Exemple :

/img/image.jpg

En interne, ce paramètre est équivalent à:

my $f = $help[0];

Si le fichier source spécifié n'existe pas, le traitement sera stoppé.

Remarque : Sans un fichier source local valide, IMG.pl ne peut pas générer d'image.

Paramètre 2 – Largeur

Le deuxième paramètre détermine la largeur d'image souhaitée en pixels.

Exemple :

700

Interne :

my $w = $help[1];

Paramètre 3 – Hauteur

Le troisième paramètre détermine la hauteur d'image souhaitée en pixels.

Exemple :

500

Interne :

my $h = $help[2];

Paramètre 4 – Proportionalité

Le quatrième paramètre contrôle l'échelonnement proportionnel ou la découpe de l'image.

Exemple :

1

Interne :

my $p = $help[3];

Cela permet de contrôler comment le rapport d'aspect original de l'image est traité lors de l'échelonnement ou de la découpe.

Paramètre 5 – Qualité

Le cinquième paramètre détermine la qualité du fichier image généré pour les images raster normales.

Exemple :

100

Interne :

my $q = $help[4];

En général, cette valeur est fixée à:

100

set.

Paramètre 6 – Zoom

Le sixième paramètre contrôle si une image peut être agrandie lorsque la taille de sortie souhaitée est supérieure à celle de l'image originale.

Interne :

my $z = $help[5];

Avec :

1

l'image sera agrandie si nécessaire.

Exemple :

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

Sans zoom activé, une image trop petite ne sera pas mise à l'échelle. La zone restante sera remplie par une bordure ou un arrière-plan blanc.

Exemple avec les six paramètres

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

Les valeurs signifient :

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

Types de fichiers autorisés

IMG.pl prend en charge les formats d'image suivants :

gif
jpg
jpe
jpeg
png
svg

Particularité des fichiers SVG

Pour les fichiers SVG, le cinquième paramètre a une signification particulière.

Pour les formats d'image normaux comme JPG ou PNG, il s'agit de:

my $q = $help[4];

la qualité de l'image.

Pour les fichiers SVG, ce paramètre est utilisé comme couleur.

Remarque : $help[4] est techniquement le cinquième paramètre passé, car le tableau interne commence à l'index 0.

Cela signifie:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

Ainsi, lors du traitement d'un fichier SVG, une couleur souhaitée peut être définie ou remplacée.

Association interne des paramètres

En interne, les six valeurs passées sont traitées comme suit:

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

Pourquoi IMG.pl est-il remplacé lors du rendu ?

L'appel interne IMG.pl n'est pas destiné à être une URL d'image publique permanente.

Au lieu de cela, il sert de directive au CMS:

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

Le résultat est ensuite enregistré comme un fichier image normal.

De:

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

deviendra par exemple:

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

Ainsi, le navigateur ne reçoit que le fichier fini.

Avantages de la mise à l'échelle des images dans le CMS

La mise à l'échelle centrale des images offre plusieurs avantages:

• 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

Résumé

IMG.pl est la fonction centrale interne de mise à l'échelle des images du CMS bluetronix.

Un appel typique est le suivant :

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

Les six paramètres sont:

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

Il est important de noter:

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.

Le flux de base est le suivant:

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