Image scaling in the CMS

Objective of the Tutorial

You will learn how the bluetronix CMS scales local images via IMG.pl during the CMS site rendering process, which six parameters are used in the call, and why the browser only receives the final generated image file.

The bluetronix CMS has a:

IMG.pl

central function for automatic scaling and preparation of images.

IMG.pl is used within the CMS to automatically crop or scale images to a desired size during the CMS site rendering process.

Important: IMG.pl is an internal function of the bluetronix CMS. The IMG.pl call is not delivered as a final image URL to the visitor.

Basic principle

Initially, an internal IMG.pl call can be used within the HTML code.

Example:

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

This call is processed during the CMS site rendering process.

The CMS generates a scaled image file accordingly, only once.

Afterwards, the original IMG.pl call is replaced by the filename of the generated image file.

Code before rendering

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

Code after rendering

After processing, the HTML code may look like this:

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

The browser does not receive the original IMG.pl call, but directly the already generated image file.

Process in the CMS site rendering process

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

This means that the image scaling does not need to be performed again with every browser request.

IMG.pl is used internally only

Important: IMG.pl is intended exclusively for internal use within the bluetronix CMS.

IMG.pl should not be used as an external image interface or directly called from external websites.

The processing occurs internally during the rendering process.

Outwards, only the generated image file is delivered.

Images must be present on the web space

Important: All images processed via IMG.pl must be located directly on the web space of the respective bluetronix installation.

External image URLs cannot be used as source files.

Allowed is, for example:

/img/image.jpg

Not allowed is, for example:

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

The source file must be available locally within the web space.

Structure of an IMG.pl call

A typical call looks like this:

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

The parameters are placed directly in sequence with:

=

separated.

No parameter names are used.

Only the order of the parameters is crucial.

Parameter overview

Parameter 1 – Filename

The first parameter contains the path to the source file.

Example:

/img/image.jpg

Internally, this parameter corresponds to:

my $f = $help[0];

If the specified source file does not exist, processing will stop.

Note: Without a valid local source file, IMG.pl cannot generate an image.

Parameter 2 – Width

The second parameter determines the desired image width in pixels.

Example:

700

Internally:

my $w = $help[1];

Parameter 3 – Height

The third parameter determines the desired image height in pixels.

Example:

500

Internally:

my $h = $help[2];

Parameter 4 – Proportionality

The fourth parameter controls the proportional scaling or cropping of the image.

Example:

1

Internally:

my $p = $help[3];

This allows you to control how the original aspect ratio of the image is handled during scaling or cropping.

Parameter 5 – Quality

The fifth parameter determines the quality of the generated image file for normal raster images.

Example:

100

Internally:

my $q = $help[4];

Typically, this value is set to:

100

.

Parameter 6 – Zoom

The sixth parameter controls whether an image can be enlarged if the desired output size is larger than the original image.

Internally:

my $z = $help[5];

With:

1

the image will be enlarged if necessary.

Example:

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

Without enabled zoom, an image that is too small will not be upscaled accordingly. The remaining area will instead be filled with a white border or background.

Example with all six parameters

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

The values mean:

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

Allowed file types

IMG.pl supports the following image formats:

gif
jpg
jpe
jpeg
png
svg

Special Feature of SVG Files

In SVG files, the fifth parameter has a special meaning.

For standard image formats such as JPG or PNG it is:

my $q = $help[4];

the image quality.

In SVG files, however, this parameter is used as a color.

Note: $help[4] is technically the fifth passed parameter, as the internal array starts at index 0.

Thus, it applies:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

This allows a desired color to be set or replaced when processing an SVG file.

Internal Parameter Mapping

Internally, the six passed values are processed as follows:

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

Why is IMG.pl replaced during rendering?

The internal IMG.pl call is not intended as a permanent public image URL.

Instead, it serves the CMS as an instruction:

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

The result is then saved as a normal image file.

From:

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

this becomes:

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

The browser thus only receives the finished file.

Advantages of CMS Image Scaling

The central image scaling offers several advantages:

• 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

Summary

IMG.pl is the central internal image scaling function of the bluetronix CMS.

A typical call looks like this:

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

The six parameters are:

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

It is important to note:

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.

The basic process is as follows:

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