Képskálázás a CMS-ben

Name: Website builder App
Brand: bluetronix
Rating: 4.7 (833 reviews)

Ismerd meg a belső képszcalázást az IMG.pl segítségével: a helyi eredeti képből a szélességen, magasságon, vágáson, minőségen és zoomon át a kész kép fájl létrehozásáig a CMS-weboldal renderelése után.

A tutoriál célja

Megtanulod, hogyan kicsinyíti a bluetronix CMS a helyi képeket az IMG.pl segítségével a CMS-weboldal renderelési folyamatában, milyen hat paraméterrel használja a hívást, és miért kap a böngésző csak a kész képfájlt.

A bluetronix CMS rendelkezik a következőkkel:

IMG.pl

egy központi funkció az automatikus képkicsinyítésre és előkészítésre.

Az IMG.pl-t a CMS-en belül használják, hogy a képeket automatikusan a kívánt méretre vágja vagy kicsinyítse a CMS-weboldal renderelési folyamata alatt.

Fontos: Az IMG.pl a bluetronix CMS belső funkciója. Az IMG.pl hívás nem kerül kiadásra végleges képként a látogató számára.

Alapelv

A HTML-kódban először egy belső IMG.pl hívás használható.

Példa:

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

A CMS-weboldal renderelési folyamatában ez a hívás feldolgozásra kerül.

A CMS egyszer létrehoz egy megfelelően kicsinyített képfájlt.

Ezután az eredeti IMG.pl hívást a készen kapott képfájl neve helyettesíti.

Kód a renderelés előtt

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

Kód a renderelés után

A feldolgozás után a HTML-kód például így nézhet ki:

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

Így a böngésző nem az eredeti IMG.pl hívást kapja, hanem közvetlenül a már elkészített képfájlt.

Folyamat a CMS-weboldal renderelési folyamatában

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

Ezáltal a képkicsinyítést nem kell minden böngészőhíváskor újra elvégezni.

Az IMG.pl csak belső használatra szolgál

Fontos: Az IMG.pl kizárólag a bluetronix CMS-en belüli használatra van szánva.

Az IMG.pl-t nem szabad külső képrendszerként használni, vagy közvetlenül külső weboldalakról hívni.

A feldolgozás belsőleg történik a renderelési folyamat során.

Kifelé csak a kész képfájl kerül kiadásra.

A képeknek a webtárhelyen kell lenniük

Fontos: Minden kép, amelyet az IMG.pl kezel, közvetlenül a megfelelő bluetronix telepítés webhelyén kell, hogy legyen.

Külső képként URL-ek nem használhatók.

Például engedélyezett:

/img/image.jpg

Például nem engedélyezett:

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

A forrásfájl helyileg a webhelyen belül kell, hogy elérhető legyen.

IMG.pl hívás felépítése

Egy tipikus hívás így néz ki:

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

A paraméterek közvetlenül egymás után állnak:

elválasztva.

Nincsenek paraméternevek használva.

Csak a paraméterek sorrendje a döntő.

Paraméterek áttekintése

Szám.	Paraméter	Jelentés	Példa
1	Fájl neve	A forrást fájl elérési útja a webtárhelyen	`/img/image.jpg`
2	Szélesség	Kívánt szélesség pixelben	`700`
3	Magasság	Kívánt magasság pixelben	`500`
4	Proporcionalitás	Szabályozza a arányos átméretezést vagy a kivágást	`1`
5	Minőség	A létrehozott kép fájl minősége	`100`
6	Zoom	Beállítja, hogy a kisebb képek a kívánt méretre nagyíthatók-e	`1`

Paraméter 1 – Fájl név

Az első paraméter tartalmazza a forrásfájl elérési útját.

Példa:

/img/image.jpg

Belsőleg ennek a paraméternek a megfelelője:

my $f = $help[0];

Ha a megadott forrásfájl nem létezik, a feldolgozás leáll.

Megjegyzés: Érvényes helyi forrásfájl nélkül az IMG.pl nem tud képet generálni.

Paraméter 2 – Szélesség

A második paraméter meghatározza a kívánt kép szélességét pixelben.

Példa:

Belsőleg:

my $w = $help[1];

Paraméter 3 – Magasság

A harmadik paraméter meghatározza a kívánt kép magasságát pixelben.

Példa:

Belsőleg:

my $h = $help[2];

Paraméter 4 – Proporcionalitás

A negyedik paraméter vezérli a képek arányos méretezését vagy vágását.

Példa:

Belsőleg:

my $p = $help[3];

Ez lehetővé teszi a kép eredeti képarányának kezelését a méretezés vagy a vágás során.

Paraméter 5 – Minőség

Az ötödik paraméter a normál raszterképek esetében a létrehozott kép fájl minőségét határozza meg.

Példa:

Belsőleg:

my $q = $help[4];

Általában ezt az értéket a következőre állítják:

van beállítva.

Paraméter 6 – Zoom

A hatodik paraméter beállítja, hogy egy képet nagyítani lehet-e, ha a kívánt kimeneti méret nagyobb, mint az eredeti kép.

Belsőleg:

my $z = $help[5];

Ez esetben:

a kép szükség esetén nagyításra kerül.

Példa:

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

Nagyítás nélkül egy túl kicsi kép nem lesz megfelelően nagyítva. A megmaradó terület fehér kerettel vagy háttérrel lesz kitöltve.

Példa mind a hat paraméterrel

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

Az értékek jelentése:

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

Engedélyezett fájltípusok

Az IMG.pl a következő képformátumokat támogatja:

gif
jpg
jpe
jpeg
png
svg

Fájltípus	Támogatott
GIF	Igen
JPG	Igen
JPE	Igen
JPEG	Igen
PNG	Igen
SVG	Igen

Különlegesség az SVG fájloknál

SVG fájlok esetén az ötödik paraméter különös jelentőséggel bír.

A normál képformátumok, mint a JPG vagy PNG esetében:

my $q = $help[4];

a kép minősége.

SVG fájlok esetén ezt a paramétert színként használják.

Megjegyzés: $help[4] technikailag az ötödik átadott paraméter, mivel a belső tömb 0-tól kezdődik.

Ezért:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

így a SVG fájl feldolgozása során egy kívánt szín állítható be vagy cserélhető ki.

Belső paraméterhozzárendelés

Belsőleg a hat átadott értéket a következő módon dolgozzák fel:

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

Miért cserélődik le az IMG.pl a renderelés során?

A belső IMG.pl hívás nem nyilvános állandó kép-URL-ként van tervezve.

Helyette a CMS számára utasításként szolgál:

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

Az eredmény ezután normál képfile-ként kerül mentésre.

Például:

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

átalakul:

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

A böngésző így csak a kész fájlt kapja meg.

A CMS-képkicsinyítés előnyei

A központi képméretezés számos előnnyel jár:

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

Összefoglalás

Az IMG.pl a bluetronix CMS központi belső képméretező funkciója.

Egy tipikus hívás így néz ki:

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

A hat paraméter a következő:

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

Fontos, hogy:

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.

Az alapvető folyamat a következő:

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

GYIK

Miket kérdeznek tőlünk gyakran az ügyfelek?

Mi az IMG.pl a bluetronix CMS-ben?

IMG.pl a CMS weboldal renderelési folyamatában a képek méretezésére és előkészítésére szolgáló központi belső funkció.

Használhatom az IMG.pl-t nyilvános képként?

Nem. A IMG.pl kizárólag a bluetronix CMS belső használatára készült. A renderelés után csak a véglegesen elkészített képfájl kerül kiadásra.

Miért cserélődik le az IMG.pl hívás a rendereléskor?

A CMS feldolgozza a megadott skálázási paramétereket, létrehozza a képfájlt, és lecseréli az eredeti hívást a HTML-ben a kész fájl elérési útjára. A böngészőnek ezért nem kell hívnia a belső funkciót.

Felhajtható-e a forrásfájl egy külső szerverre?

Nem. Az eredeti képnek közvetlenül a megfelelő bluetronix telepítés webhelyén kell lennie. Külső kép-URL nem használható forrásfájlként.

Hogyan adjuk át a hat IMG.pl paramétert?

Az értékek paraméternév nélkül, egymás után, egyenlőségjellel = elválasztva kerülnek megadásra. A meghatározott sorrend a döntő.

Mi a sorrendje az IMG.pl paramétereknek?

A sorrend: fájlnév, szélesség, magasság, arányosság, minőség, illetve SVG esetén szín és zoom.

Mi történik, ha a megadott eredeti kép hiányzik?

Ha a forrásfájl nem létezik, az IMG.pl feldolgozás leáll, és nem lehet megfelelően skálázott képfájlt létrehozni.

Hogyan állítom be a képkimenet méretét?

A második és harmadik paraméterrel a szélességet és a magasságot pixelben határozod meg. A negyedik paraméter befolyásolja az arányos skálázást vagy a vágást.

Mit tesz a zoom paraméter?

A hatodik paraméter határozza meg, hogy a túl kicsi eredeti kép a kívánt kimeneti méretre nagyítható-e. A 1 aktiválja a zoomot; aktív zoom nélkül a megmaradó terület a túl kicsi képeknél fehérrel van kitöltve.

Milyen jelentősége van az ötödik paraméternek SVG fájloknál?

Hagyományos raszteres képek, mint a JPG vagy PNG esetén az ötödik paraméter határozza meg a minőséget. SVG fájloknál ugyanaz a paraméter a színhez használatos.

Milyen képformátumokat támogat az IMG.pl?

Támogatott formátumok a GIF, JPG, JPE, JPEG, PNG és SVG.

Hogyan néz ki a HTML az IMG.pl feldolgozás után?

A belső hívás helyére a létrehozott fájl elérési útja kerül. Például: /tmp/img_image_700_500_1_100_1_1070.jpg; a konkrét fájlnév a megfelelő feldolgozásból származik.

Minden böngészőhívásnál újra kell skálázni az IMG.pl-t?

Nem. A belső feldolgozás után a már elkészített képfájl közvetlenül kiadható. A böngésző csak a kész kép-URL-t kapja.