Escalonamento de imagem no CMS

Objetivo do tutorial

Você aprenderá como o CMS bluetronix escala imagens locais através de IMG.pl durante o processo de renderização do site CMS, quais seis parâmetros a chamada utiliza e por que o navegador recebe apenas o arquivo de imagem gerado.

O CMS bluetronix possui:

IMG.pl

uma função central para a escalabilidade automática e preparação de imagens.

IMG.pl é usado dentro do CMS para cortar ou escalar automaticamente imagens para um tamanho desejado durante o processo de renderização do site CMS.

Importante: IMG.pl é uma função interna do CMS bluetronix. A chamada IMG.pl não é entregue como uma URL de imagem final ao visitante.

Princípio básico

Dentro do código HTML, uma chamada interna IMG.pl pode ser usada inicialmente.

Exemplo:

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

Durante o processo de renderização do site CMS, essa chamada é processada.

O CMS gera uma imagem em um tamanho correspondente uma única vez.

Em seguida, a chamada IMG.pl original é substituída pelo nome do arquivo da imagem gerada.

Código antes da renderização

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

Código após a renderização

Após o processamento, o código HTML pode, por exemplo, parecer assim:

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

O navegador não recebe a chamada IMG.pl original, mas diretamente a imagem já gerada.

Fluxo no processo de renderização do site 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

Assim, a redimensionamento da imagem não precisa ser realizado a cada chamada do navegador.

IMG.pl é usado apenas internamente

Importante: IMG.pl é destinado exclusivamente ao uso interno dentro do CMS bluetronix.

O IMG.pl não deve ser usado como uma interface de imagem externa ou chamado diretamente de sites externos.

O processamento é feito internamente durante o processo de renderização.

Do lado de fora, apenas a imagem gerada é entregue.

As imagens devem estar disponíveis no espaço web

Importante: Todas as imagens processadas via IMG.pl devem estar localizadas diretamente no espaço web da respectiva instalação bluetronix.

URLs de imagens externas não podem ser usadas como arquivos de origem.

É permitido, por exemplo:

/img/image.jpg

Não é permitido, por exemplo:

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

O arquivo de origem deve estar disponível localmente dentro do espaço web.

Estrutura de uma chamada IMG.pl

Uma chamada típica é:

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

Os parâmetros são colocados diretamente um após o outro com:

=

separados.

Nenhum nome de parâmetro é utilizado.

O que importa é apenas a ordem dos parâmetros.

Visão geral dos parâmetros

Parâmetro 1 – Nome do arquivo

O primeiro parâmetro contém o caminho para o arquivo de origem.

Exemplo:

/img/image.jpg

Internamente, este parâmetro é:

my $f = $help[0];

Se o arquivo de origem especificado não existir, o processamento será encerrado.

Aviso: Sem um arquivo de origem local válido, o IMG.pl não pode gerar uma imagem.

Parâmetro 2 – Largura

O segundo parâmetro determina a largura desejada da imagem em pixels.

Exemplo:

700

Internamente:

my $w = $help[1];

Parâmetro 3 – Altura

O terceiro parâmetro determina a altura desejada da imagem em pixels.

Exemplo:

500

Internamente:

my $h = $help[2];

Parâmetro 4 – Proporcionalidade

O quarto parâmetro controla a escala proporcional ou o corte da imagem.

Exemplo:

1

Internamente:

my $p = $help[3];

Isso controla como a proporção original da imagem é tratada durante a escalagem ou corte.

Parâmetro 5 – Qualidade

O quinto parâmetro determina a qualidade do arquivo de imagem gerado para imagens raster normais.

Exemplo:

100

Internamente:

my $q = $help[4];

Normalmente, esse valor é definido como:

100

definido.

Parâmetro 6 – Zoom

O sexto parâmetro controla se uma imagem pode ser ampliada quando o tamanho de saída desejado é maior que a imagem original.

Internamente:

my $z = $help[5];

Com:

1

a imagem é ampliada quando necessário.

Exemplo:

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

Sem o zoom ativado, uma imagem muito pequena não será escalada adequadamente. A área restante será preenchida com uma borda ou fundo branco.

Exemplo com todos os seis parâmetros

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

Os valores significam:

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

Tipos de arquivo permitidos

IMG.pl suporta os seguintes formatos de imagem:

gif
jpg
jpe
jpeg
png
svg

Particularidade com arquivos SVG

Em arquivos SVG, o quinto parâmetro tem um significado especial.

Em formatos de imagem normais como JPG ou PNG é:

my $q = $help[4];

a qualidade da imagem.

Em arquivos SVG, esse parâmetro é usado como cor.

Aviso: $help[4] é tecnicamente o quinto parâmetro passado, pois o array interno começa no índice 0.

Portanto, se aplica:

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

Dessa forma, ao processar um arquivo SVG, uma cor desejada pode ser definida ou substituída.

Mapeamento interno de parâmetros

Internamente, os seis valores passados são processados da seguinte forma:

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

Por que IMG.pl é substituído durante a renderização?

A chamada interna do IMG.pl não é destinada a uma URL de imagem pública permanente.

Em vez disso, serve como instrução para o CMS:

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

O resultado será então salvo como um arquivo de imagem normal.

De:

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

torna-se por exemplo:

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

O navegador recebe apenas o arquivo final.

Vantagens da escalabilidade de imagens do CMS

A central de redimensionamento de imagens oferece várias vantagens:

• 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

Resumo

O IMG.pl é a função central interna de redimensionamento de imagens do CMS bluetronix.

Uma chamada típica é:

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

Os seis parâmetros são:

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

Importante é:

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.

O processo básico é:

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