סקלות תמונה ב-CMS

מטרת המדריך

אתה לומד כיצד ה-CMS של bluetronix משדך תמונות מקומיות דרך IMG.pl במהלך תהליך הרינדור של אתר ה-CMS, אילו שישה פרמטרים השיחה משתמשת ולמה הדפדפן מקבל לאחר מכן רק את קובץ התמונה המוכן.

ל-CMS של bluetronix יש:

IMG.pl

פונקציה מרכזית לקונפיגורציה אוטומטית של סקלת התמונות.

IMG.pl משמשת בתוך ה-CMS כדי לגזור או לסקל תמונות במהלך תהליך הרינדור של אתר ה-CMS לגודל הרצוי.

חשוב: IMG.pl היא פונקציה פנימית של ה-CMS של bluetronix. קריאת 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

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

בלי זום מופעל, תמונה קטנה מדי לא תעלה בהתאם. האזור הנותר יתמלא במקום זאת בגבול או רקע לבן.

דוגמה עם כל ששת הפרמטרים

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

כך שניתן לקבוע או להחליף צבע רצוי בעת עיבוד קובץ SVG.

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

כך ניתן לקבוע או להחליף צבע משolved בהליך של עיבוד קובץ 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