مقیاس‌بندی تصویر در 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">

پارامترها به صورت مستقیم پشت سر هم با:

=

جدا می‌شوند.

هیچ نام پارامتری استفاده نمی‌شود.

تنها ترتیب پارامترها مهم است.

نمای کلی پارامترها

پارامتر ۱ – نام فایل

پارامتر اول شامل مسیر به فایل منبع است.

مثال:

/img/image.jpg

داخلی این پارامتر برابر است با:

my $f = $help[0];

اگر فایل منبع مشخص شده وجود نداشته باشد، پردازش متوقف می شود.

توجه: بدون فایل منبع محلی معتبر، IMG.pl نمی تواند تصویری تولید کند.

پارامتر ۲ – عرض

پارامتر دوم تعیین کننده عرض تصویر مورد نظر به پیکسل است.

مثال:

700

داخلی:

my $w = $help[1];

پارامتر ۳ – ارتفاع

پارامتر سوم تعیین کننده ارتفاع تصویر مورد نظر به پیکسل است.

مثال:

500

داخلی:

my $h = $help[2];

پارامتر ۴ – تناسب

پارامتر چهارم مقیاس‌گذاری نسبی یا برش تصویر را کنترل می‌کند.

مثال:

1

داخلی:

my $p = $help[3];

با این کار می‌توان تنظیم کرد که نسبت ابعاد اصلی تصویر هنگام مقیاس‌گذاری یا برش چگونه رفتار کند.

پارامتر ۵ – کیفیت

پارامتر پنجم کیفیت فایل تصویری تولید شده را در تصاویر رستر معمولی تعیین می‌کند.

مثال:

100

داخلی:

my $q = $help[4];

به طور معمول، این مقدار به:

100

تنظیم می‌شود.

پارامتر ۶ – زوم

پارامتر ششم تعیین می‌کند که آیا تصویر می‌تواند بزرگ شود، وقتی که اندازه خروجی مورد نظر بزرگ‌تر از تصویر اصلی است.

داخلی:

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 شروع می‌شود.

بنابراین، این چنین است:

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