Κλιμάκωση εικόνας στο CMS

Σκοπός του σεμιναρίου

Μαθαίνεις πώς το bluetronix CMS κλιμακώνει τοπικές εικόνες μέσω του IMG.pl κατά τη διαδικασία απόδοσης του CMS-Site, ποιες έξι παραμέτρους χρησιμοποιεί η κλήση και γιατί ο περιηγητής λαμβάνει μόνο το τελικό αρχείο εικόνας.

Το bluetronix CMS διαθέτει:

IMG.pl

μια κεντρική λειτουργία για αυτόματη κλιμάκωση και επεξεργασία εικόνων.

Το IMG.pl χρησιμοποιείται εντός του CMS για την αυτόματη κοπή ή κλιμάκωση των εικόνων σε επιθυμητό μέγεθος κατά τη διαδικασία απόδοσης του CMS-Site.

Σημείωση: Το IMG.pl είναι μια εσωτερική λειτουργία του bluetronix CMS. Η κλήση IMG.pl δεν παραδίδεται ως τελική διεύθυνση URL εικόνας στον επισκέπτη.

Βασική αρχή

Εντός του κώδικα HTML, μπορεί αρχικά να χρησιμοποιηθεί μια εσωτερική κλήση IMG.pl.

Παράδειγμα:

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

Κατά τη διαδικασία απόδοσης της τοποθεσίας CMS, αυτή η κλήση επεξεργάζεται.

Το CMS δημιουργεί από αυτό μία αντίστοιχα κλιμακωμένη εικόνα.

Στη συνέχεια, η αρχική κλήση IMG.pl αντικαθίσταται με το όνομα αρχείου της ολοκληρωμένης εικόνας.

Κώδικας πριν την απόδοση

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

Κώδικας μετά την απόδοση

Μετά την επεξεργασία, ο HTML κώδικας μπορεί, για παράδειγμα, να φαίνεται έτσι:

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

Ο φυλλομετρητής δεν λαμβάνει την αρχική κλήση IMG.pl, αλλά άμεσα την ήδη δημιουργημένη εικόνα.

Διαδικασία απόδοσης στο CMS-Site

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

Έτσι, η κλιμάκωση εικόνας δεν χρειάζεται να εκτελείται ξανά με κάθε κλήση από το φυλλομετρητή.

Το IMG.pl χρησιμοποιείται μόνο εσωτερικά

Σημαντικό: Το IMG.pl προορίζεται αποκλειστικά για εσωτερική χρήση εντός του CMS bluetronix.

Το IMG.pl δεν πρέπει να χρησιμοποιείται ως εξωτερικό διασύνδεσμοι εικόνας ή να καλείται απευθείας από εξωτερικές ιστοσελίδες.

Η επεξεργασία πραγματοποιείται εσωτερικά κατά τη διάρκεια της διαδικασίας απόδοσης.

Εξωτερικά παραδίδεται αποκλειστικά η ολοκληρωμένη εικόνα.

Οι εικόνες πρέπει να είναι διαθέσιμες στον ιστό

Σημαντικό: Όλες οι εικόνες που επεξεργάζονται μέσω του IMG.pl πρέπει να βρίσκονται απευθείας στον χώρο αποθήκευσης της εκάστοτε εγκατάστασης bluetronix.

Εξωτερικές διευθύνσεις URL εικόνας δεν μπορούν να χρησιμοποιηθούν ως πηγαία αρχεία.

Επιτρέπεται, για παράδειγμα:

/img/image.jpg

Δεν επιτρέπεται, για παράδειγμα:

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

Το πηγαίο αρχείο πρέπει να είναι διαθέσιμο τοπικά εντός του χώρου αποθήκευσης.

Δομή μιας κλήσης IMG.pl

Μια τυπική κλήση είναι:

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

Οι παράμετροι αναγράφονται διαδοχικά με:

=

χωρίζονται.

Δεν χρησιμοποιούνται ονόματα παραμέτρων.

Αποφασιστική είναι αποκλειστικά η σειρά των παραμέτρων.

Επισκόπηση παραμέτρων

Παράμετρος 1 – Όνομα αρχείου

Η πρώτη παράμετρος περιέχει τη διαδρομή προς το αρχείο πηγής.

Παράδειγμα:

/img/image.jpg

Εσωτερικά, αυτή η παράμετρος αντιστοιχεί σε:

my $f = $help[0];

Αν το καθορισμένο αρχείο πηγής δεν υπάρχει, η επεξεργασία σταματά.

Σημείωση: Χωρίς έγκυρο τοπικό αρχείο πηγής, το IMG.pl δεν μπορεί να παράγει καμία εικόνα.

Παράμετρος 2 – Πλάτος

Η δεύτερη παράμετρος καθορίζει το επιθυμητό πλάτος εικόνας σε εικονοκύτταρα.

Παράδειγμα:

700

Εσωτερικά:

my $w = $help[1];

Παράμετρος 3 – Ύψος

Η τρίτη παράμετρος καθορίζει το επιθυμητό ύψος εικόνας σε εικονοκύτταρα.

Παράδειγμα:

500

Εσωτερικά:

my $h = $help[2];

Παράμετρος 4 – Αναλογία

Η τέταρτη παράμετρος ελέγχει την αναλογική κλιμάκωση ή την κοπή της εικόνας.

Παράδειγμα:

1

Εσωτερικά:

my $p = $help[3];

Έτσι μπορεί να ρυθμιστεί πώς θα διατηρηθεί η αρχική αναλογία της εικόνας κατά την κλιμάκωση ή την κοπή.

Παράμετρος 5 – Ποιότητα

Η πέμπτη παράμετρος καθορίζει την ποιότητα του παραγόμενου αρχείου εικόνας για κανονικές ραστερικές εικόνες.

Παράδειγμα:

100

Εσωτερικά:

my $q = $help[4];

Συνήθως αυτή η τιμή είναι:

100

ορίζεται.

Παράμετρος 6 – Ζουμ

Η έκτη παράμετρος ελέγχει αν μπορεί να μεγεθυνθεί μια εικόνα, εάν το επιθυμητό μέγεθος εξόδου είναι μεγαλύτερο από την αρχική εικόνα.

Εσωτερικά:

my $z = $help[5];

Με:

1

η εικόνα μεγεθύνεται αν χρειάζεται.

Παράδειγμα:

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

Χωρίς ενεργοποιημένο zoom, μια πολύ μικρή εικόνα δεν θα κλιμακωθεί αναλόγως. Αντ' αυτού, η υπόλοιπη περιοχή θα γεμίσει με ένα λευκό περιθώριο ή φόντο.

Παράδειγμα με όλες τις έξι παραμέτρους

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

Οι τιμές σημαίνουν:

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

Επιτρεπόμενοι τύποι αρχείων

Το IMG.pl υποστηρίζει τα παρακάτω μορφότυπα εικόνας:

gif
jpg
jpe
jpeg
png
svg

Ιδιαίτεροτητα για αρχεία SVG

Για αρχεία SVG, η πέμπτη παράμετρος έχει ιδιαίτερη σημασία.

Για κανονικές μορφές εικόνας όπως JPG ή PNG είναι:

my $q = $help[4];

η ποιότητα της εικόνας.

Για αρχεία SVG, αυτή η παράμετρος χρησιμοποιείται αντί για χρώμα.

Σημείωση: $help[4] είναι τεχνικά η πέμπτη παραμετρική τιμή που δόθηκε, καθώς το εσωτερικό πίνακας ξεκινά από το δείκτη 0.

Έτσι ισχύει:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

Αυτό επιτρέπει τη ρύθμιση ή την αντικατάσταση μιας επιθυμητής χρώματος κατά την επεξεργασία μιας SVG εικόνας.

Εσωτερική αντιστοίχιση παραμέτρων

Εσωτερικά, οι έξι παραδοθέντες τιμές επεξεργάζονται ως εξής:

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

Γιατί αντικαθίσταται το IMG.pl κατά την απόδοση;

Η εσωτερική κλήση IMG.pl δεν προορίζεται ως μόνιμη δημόσια διεύθυνση URL εικόνας.

Αντίθετα, χρησιμεύει στο CMS ως οδηγία:

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

Το αποτέλεσμα αποθηκεύεται στη συνέχεια ως κανονικό αρχείο εικόνας.

Από:

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

θα γίνει για παράδειγμα:

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

Αυτό σημαίνει ότι ο περιηγητής λαμβάνει μόνο το τελικό αρχείο.

Πλεονεκτήματα της κλιμάκωσης εικόνας στο CMS

Η κεντρική κλιμάκωση εικόνας προσφέρει αρκετά πλεονεκτήματα:

• 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

Περίληψη

Το IMG.pl είναι η κεντρική εσωτερική λειτουργία κλιμάκωσης εικόνας του CMS bluetronix.

Μια τυπική κλήση είναι:

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

Οι έξι παράμετροι είναι:

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

Σημαντικό είναι:

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.

Η βασική διαδικασία έχει ως εξής:

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