Escalado de imágenes en el CMS

Objetivo del tutorial

Aprenderás cómo el CMS de bluetronix escala imágenes locales a través de IMG.pl durante el proceso de renderizado del sitio del CMS, qué seis parámetros utiliza la llamada y por qué el navegador recibe solo el archivo de imagen generado.

El CMS de bluetronix cuenta con:

IMG.pl

una función central para el escalado y preparación automática de imágenes.

IMG.pl se utiliza dentro del CMS para recortar o escalar automáticamente las imágenes al tamaño deseado durante el proceso de renderizado del sitio del CMS.

Importante: IMG.pl es una función interna del CMS de bluetronix. La llamada a IMG.pl no se entrega como la URL final de la imagen al visitante.

Principio básico

Dentro del código HTML, se puede utilizar inicialmente una llamada interna a IMG.pl.

Ejemplo:

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

Durante el proceso de renderizado del sitio del CMS, esta llamada es procesada.

El CMS genera una vez un archivo de imagen escalado correspondiente.

A continuación, se reemplaza la llamada original a IMG.pl por el nombre del archivo de imagen generado.

Código antes del renderizado

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

Código después del renderizado

Después del procesamiento, el código HTML puede verse de esta manera:

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

El navegador no recibe la llamada original a IMG.pl, sino directamente el archivo de imagen ya generado.

Flujo en el proceso de renderizado del sitio 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

Esto evita que el escalado de imágenes se realice nuevamente en cada llamada del navegador.

IMG.pl se utiliza solo internamente

Importante: IMG.pl está destinado exclusivamente para uso interno dentro del CMS de bluetronix.

No se debe utilizar IMG.pl como una interfaz de imagen externa ni ser llamado directamente desde páginas web externas.

El procesamiento se realiza internamente durante el proceso de renderizado.

Externamente solo se entrega el archivo de imagen generado.

Las imágenes deben estar disponibles en el espacio web

Importante: Todas las imágenes que se procesan a través de IMG.pl deben estar directamente en el espacio web de la instalación de bluetronix correspondiente.

Las URL de imágenes externas no pueden utilizarse como archivo fuente.

Se permite, por ejemplo:

/img/image.jpg

No se permite, por ejemplo:

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

El archivo fuente debe estar disponible localmente dentro del espacio web.

Construcción de una llamada IMG.pl

Una llamada típica es:

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

Los parámetros se colocan uno detrás del otro con:

=

separados.

No se utilizan nombres de parámetros.

Lo único decisivo es el orden de los parámetros.

Resumen de parámetros

Parámetro 1 – Nombre de archivo

El primer parámetro contiene la ruta al archivo fuente.

Ejemplo:

/img/image.jpg

Internamente, este parámetro corresponde a:

my $f = $help[0];

Si el archivo fuente especificado no existe, el procesamiento se detiene.

Nota: Sin un archivo fuente local válido, IMG.pl no puede generar una imagen.

Parámetro 2 – Ancho

El segundo parámetro determina el ancho de la imagen deseado en píxeles.

Ejemplo:

700

Interno:

my $w = $help[1];

Parámetro 3 – Alto

El tercer parámetro determina la altura de la imagen deseada en píxeles.

Ejemplo:

500

Interno:

my $h = $help[2];

Parámetro 4 – Proporcionalidad

El cuarto parámetro controla el escalado proporcional o el recorte de la imagen.

Ejemplo:

1

Interno:

my $p = $help[3];

Esto permite controlar cómo se trata la relación de aspecto original de la imagen al escalarla o recortarla.

Parámetro 5 – Calidad

El quinto parámetro determina la calidad del archivo de imagen generado en imágenes rasterizadas normales.

Ejemplo:

100

Interno:

my $q = $help[4];

Normalmente, este valor se establece en:

100

se establece.

Parámetro 6 – Zoom

El sexto parámetro controla si se puede ampliar una imagen si el tamaño de salida deseado es mayor que la imagen original.

Interno:

my $z = $help[5];

Con:

1

la imagen se amplía si es necesario.

Ejemplo:

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

Sin zoom activado, una imagen demasiado pequeña no se escalará adecuadamente. La parte restante se llenará en su lugar con un borde o fondo blanco.

Ejemplo con los seis parámetros

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

Los valores significan:

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

Tipos de archivo permitidos

IMG.pl soporta los siguientes formatos de imagen:

gif
jpg
jpe
jpeg
png
svg

Particularidad de los archivos SVG

En los archivos SVG, el quinto parámetro tiene un significado especial.

En formatos de imagen normales como JPG o PNG es:

my $q = $help[4];

la calidad de la imagen.

En los archivos SVG, este parámetro se utiliza en cambio como color.

Nota: $help[4] es técnicamente el quinto parámetro pasado, ya que el array interno comienza en el índice 0.

Por lo tanto, se aplica:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

Esto permite establecer o reemplazar un color deseado al procesar un archivo SVG.

Asignación de parámetros internos

Internamente, los seis valores pasados se procesan de la siguiente manera:

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

¿Por qué se reemplaza IMG.pl durante el renderizado?

La llamada interna IMG.pl no está destinada a ser una URL de imagen pública permanente.

En su lugar, sirve al CMS como una instrucción:

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

El resultado se guarda posteriormente como un archivo de imagen normal.

De:

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

se convierte, por ejemplo, en:

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

El navegador recibe solo el archivo final.

Ventajas del escalado de imágenes en el CMS

La escalación de imágenes central ofrece varias ventajas:

• 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

Resumen

IMG.pl es la función central interna de escalado de imágenes del CMS bluetronix.

Una llamada típica es:

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

Los seis parámetros son:

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

Es 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.

El flujo básico es:

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