CMS에서의 이미지 스케일링

튜토리얼 목표

블루트로닉스 CMS가 CMS 사이트 렌더링 프로세스 동안 IMG.pl을 통해 지역 이미지를 어떻게 축소하는지, 호출이 사용하는 여섯 개의 매개변수는 무엇인지, 그리고 브라우저가 이후에 완성된 이미지 파일만 받는 이유를 배웁니다.

블루트로닉스 CMS는 다음과 같은 기능을 가지고 있습니다:

IMG.pl

자동 이미지 축소 및 준비를 위한 중앙 기능.

IMG.pl은 CMS에서 이미지 크기를 자동으로 원하는 크기로 자르거나 축소할 때 사용됩니다.

중요: IMG.pl은 블루트로닉스 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 사이트 렌더링 프로세스 흐름

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은 bluetronix CMS 내의 내부 사용을 위해서만 마련되어 있습니다.

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에서 시작하므로.

따라서 다음과 같습니다:

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은 bluetronix CMS의 중앙 내부 이미지 크기 조정 기능입니다.

일반적인 호출은 다음과 같습니다:

<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