Skalowanie obrazów w CMS

Cel samouczka

Nauczysz się, jak CMS bluetronix skaluje lokalne obrazy przez IMG.pl podczas procesu renderowania CMS-strony, jakie sześć parametrów używa wywołanie oraz dlaczego przeglądarka otrzymuje tylko gotowy plik obrazu.

CMS bluetronix posiada:

IMG.pl

centralną funkcję automatycznego skalowania i przetwarzania obrazów.

IMG.pl jest używane wewnątrz CMS, aby automatycznie przycinać lub skalować obrazy do żądanych rozmiarów podczas procesu renderowania CMS-strony.

Ważne: IMG.pl jest wewnętrzną funkcją CMS bluetronix. Wywołanie IMG.pl nie jest dostarczane jako końcowy adres URL obrazu do odwiedzającego.

Podstawowa zasada

W obrębie kodu HTML można najpierw użyć wewnętrznego wywołania IMG.pl.

Przykład:

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

Podczas procesu renderowania strony CMS ta funkcja jest przetwarzana.

CMS generuje z tego jednokrotnie odpowiednio skalowany plik graficzny.

Następnie oryginalne wywołanie IMG.pl jest zastępowane nazwą gotowego pliku graficznego.

Kod przed renderowaniem

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

Kod po renderowaniu

Po przetworzeniu kod HTML może wyglądać na przykład tak:

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

W ten sposób przeglądarka nie otrzymuje oryginalnego wywołania IMG.pl, lecz bezpośrednio już utworzony plik graficzny.

Przebieg w procesie renderowania CMS-strony

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

Dzięki temu skalowanie obrazów nie musi być przeprowadzane ponownie przy każdym wywołaniu przeglądarki.

IMG.pl jest używane tylko wewnętrznie

Ważne: IMG.pl jest przeznaczone wyłącznie do użytku wewnętrznego w systemie bluetronix CMS.

IMG.pl nie należy używać jako zewnętrznego interfejsu do obrazów ani bezpośrednio wywoływać z zewnętrznych stron internetowych.

Przetwarzanie odbywa się wewnętrznie podczas procesu renderowania.

Na zewnątrz dostarczany jest wyłącznie gotowy plik graficzny.

Obrazy muszą być dostępne w przestrzeni internetowej

Ważne: Wszystkie obrazy przetwarzane przez IMG.pl muszą znajdować się bezpośrednio na przestrzeni sieciowej danej instalacji bluetronix.

Zewnętrzne adresy URL do obrazów nie mogą być używane jako pliki źródłowe.

Dozwolone jest na przykład:

/img/image.jpg

Nie jest przewidziane na przykład:

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

Plik źródłowy musi być dostępny lokalnie w obrębie przestrzeni sieciowej.

Budowa wywołania IMG.pl

Typowe wywołanie wygląda następująco:

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

Parametry są podawane bezpośrednio jeden po drugim:

=

oddzielone.

Nie używa się nazw parametrów.

Decydująca jest jedynie kolejność parametrów.

Przegląd parametrów

Parametr 1 – nazwa pliku

Pierwszy parametr zawiera ścieżkę do pliku źródłowego.

Przykład:

/img/image.jpg

Wewnątrz odpowiada ten parametr:

my $f = $help[0];

Jeśli wskazany plik źródłowy nie istnieje, przetwarzanie zostanie zakończone.

Uwaga: Bez ważnego lokalnego pliku źródłowego IMG.pl nie może wygenerować obrazu.

Parametr 2 – szerokość

Drugi parametr określa żądaną szerokość obrazu w pikselach.

Przykład:

700

Wewnątrz:

my $w = $help[1];

Parametr 3 – wysokość

Trzeci parametr określa żądaną wysokość obrazu w pikselach.

Przykład:

500

Wewnątrz:

my $h = $help[2];

Parametr 4 – proporcjonalność

Czwarty parametr kontroluje proporcjonalne skalowanie lub przycinanie obrazu.

Przykład:

1

Wewnątrz:

my $p = $help[3];

Dzięki temu można kontrolować, jak oryginalny stosunek boków obrazu jest traktowany podczas skalowania lub przycinania.

Parametr 5 – jakość

Piąty parametr określa jakość generowanego pliku graficznego w przypadku normalnych obrazów rastrowych.

Przykład:

100

Wewnątrz:

my $q = $help[4];

Zwykle wartość ta ustawiana jest na:

100

ustawione.

Parametr 6 – zoom

Szósty parametr kontroluje, czy obraz może być powiększany, gdy żądany rozmiar wyjściowy jest większy od oryginalnego obrazu.

Wewnątrz:

my $z = $help[5];

Z:

1

obraz jest powiększany w razie potrzeby.

Przykład:

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

Bez aktywnego zoomu zbyt mały obraz nie jest odpowiednio powiększany. Pozostały obszar jest wypełniany białym marginesem lub tłem.

Przykład ze wszystkimi sześcioma parametrami

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

Wartości oznaczają:

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

Dopuszczalne typy plików

IMG.pl obsługuje następujące formaty obrazów:

gif
jpg
jpe
jpeg
png
svg

Szczególność plików SVG

W przypadku plików SVG piąty parametr ma szczególne znaczenie.

W przypadku normalnych formatów obrazów, takich jak JPG lub PNG, jest to:

my $q = $help[4];

jakość obrazu.

W przypadku plików SVG ten parametr jest używany jako kolor.

Uwaga: $help[4] jest technicznie piątym przekazanym parametrem, ponieważ wewnętrzna tablica zaczyna się od indeksu 0.

W związku z tym:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

przy przetwarzaniu pliku SVG można ustawić lub zastąpić żądany kolor.

Wewnętrzne mapowanie parametrów

Wewnętrznie sześć przekazanych wartości jest przetwarzanych w następujący sposób:

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

Dlaczego IMG.pl jest zastępowane podczas renderowania?

Wewnętrzne wywołanie IMG.pl nie jest przeznaczone jako trwały publiczny adres URL obrazu.

Zamiast tego służy CMS jako instrukcja:

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

Wynik jest następnie zapisywany jako normalny plik graficzny.

Z:

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

na przykład:

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

Przeglądarka otrzymuje jedynie gotowy plik.

Zalety skalowania obrazów w CMS

Centralne skalowanie obrazów oferuje kilka zalet:

• 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

Podsumowanie

IMG.pl jest centralną wewnętrzną funkcją skalowania obrazów w systemie bluetronix CMS.

Typowe wywołanie wygląda następująco:

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

Sześć parametrów to:

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

Ważne jest:

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.

Podstawowy proces realizacji jest następujący:

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