O SPIP permite aplicar efeitos automatizados às imagens. Esses efeitos têm dois objetivos:
- garantir a coerência gráfica do site, ao fabricar automaticamente elementos de navegação que serão sempre criados de acordo com os desejos do designer gráfico;
- criar efeitos relativamente impactantes sem, no entanto, exigir que os autores das matérias tenham que tratar as imagens eles próprios e, também, sem impedir futuras evoluções gráficas do site.
Por exemplo: pretende-se que na interface gráfica do site público os logos de navegação das matérias tenham dois aspetos:
- em todos os casos, estejam "pousados na superfície", com um reflexo sob os mesmos;
- em repouso, ficam em preto-e-branco, escurecidos; quando o cursor é sobreposto, tornam-se coloridos.
Sem os automatismos a seguir, os webmasters teriam que criar manualmente as duas versões dessas imagens e instalar cada par de logos no site, com dois inconvenientes (particularmente incómodos):
- a manipulação é demorada, além disso não pode ser confiada a terceiros, que de qualquer forma não seriam capazes de a executar corretamente;
- quando se quiser evoluir a interface gráfica do site, ficará preso a estes logos muito específicos.
Com os automatismos a seguir, pode-se trabalhar de outra maneira: os autores instalam um simples logo de matéria (por exemplo, uma fotografia) sem qualquer tratamento específico; automaticamente, os templates do SPIP criam:
- uma vinheta no tamanho correto;
- a mesma vinheta em preto-e-branco, escurecida;
- os reflexos da umagem na superfície.
Alguns dos filtros apresentados usam as funções de redirecionamento de imagens. É fundamental, após a instalação, entrar no espaço privado em "Configuração" e clicar no separador "Funções avançadas": nessa página, selecione "GD2" como o "Método de criação de vinhetas".
Aviso de lentidão
Antes de iniciar, convém assinalar que estas funções são pesadas. Podem mesmo ser bem pesadas se usar imagens grandes. O processamento é relativamente longo e, se tiver que processar várias imagens nos seus templates, ou mesmo vários efeitos para cada imagem, corre o risco de obter erros de timeout (tempo máximo de execução de scripts excedido).
Dito isto, é importante notar que os filtros de tratamento de imagens têm o seu próprio sistema de cache: uma vez calculada, uma imagem "filtrada" é gravada, não sendo mais processada. A carga no servidor é portanto limitada ao primeiro processamento.
Este aviso diz respeito, principalmente, aos alojamentos web mutualizados.
A página "Esvaziar o cache" no espaço privado exibe o espaço em disco usado pelo SPIP para guardar essas imagens processadas. Pode-se, assim, esvaziar o cache independentemente do cache dos templates e das páginas HTML.
Transparências
Se usar GD2, além das funções expostas nesta matéria, notará que as reduções de imagem (image_reduire) preservam a transparência dos ficheiros GIF e PNG 24 (transparência por camada alfa).
Na configuração do site, considere escolher GD2 como o método de redução de imagem.
A imagem original
Qualquer imagem gerida pelo SPIP pode ter os filtros a seguir aplicados. Isto inclui os logos (de matérias, de seções...) mas também as imagens de portfolio (imagens como ficheiros anexos às matérias), sem esquecer as novas imagens tipográficas.
Eis, para os nossos exemplos, uma imagem a processar.
Reduzir as dimensões de uma imagem
A função reduire_image mudou para image_reduire, para adotar a mesma lógica de nomes dass novas funções gráficas. A denominação antiga continua, no entanto, funcional.
É agora completada por image_reduire_par, que permite reduzir uma imagem numa escala específica. Onde image_reduire reduz uma imagem em dimensões prefixadas, image_reduire_par reduz a imagem proporcionamente.
Por exemplo:
[(#TITRE|image_typo{taille=24}|image_reduire_par{2})]
reduz a imagem tipográfica por um fator de 2 (a imagem fica duas vezes mais pequena).
Reenquadrar uma imagem
A função image_recadre{largura,altura,posição} permite reenquadrar uma imagem (equivalente ao crop dos programas de tratamento de imagens) com as combinações de left/center/right e top/center/bottom para a posição (ex: ’left center’).
Ver |image_recadre
Por exemplo:
[(#FICHIER|image_recadre{90,90,center})]
reenquadra a imagem original num quadrado de 90 px de largura e altura, com base no centro da imagem.
image_recadre também permite ampliar um ficheiro de imagem, com o fundo sendo especificado com uma cor ou ’transparent’ como 4º argumento:
[(#FICHIER|image_recadre{300,500,'top left','transparent'})]
Mudar o formato da imagem
O filtro |image_format permite forçar um formato de uma imagem ou de images presentes num texto. Por exemplo:
[(#TEXTE|image_format{webp})]
Permite converter todas as imagens bitmap para o formato webp. A imagens svg (vetoriais) permanecem no seu formato original.
Remover a transparência e forçar o formato da imagem
A função image_aplatir executa duas operações:
- salvaguarda uma imagem num formato predefinido (por exemplo, transformar uma imagem PNG numa imagem GIF);
- suprime as informações de transparência, substituindo as áreas transparentes por uma cor.
Por exemplo:
[(#TITRE
|image_typo{police=stencil.ttf,couleur=000000,taille=40}
|image_aplatir{gif,ff0000})]
O título transformado em imagem tipográfica é um ficheiro PNG com áreas transparentes. Aplicando-se à imagem o filtro image_aplatir, é transformada em GIF, substituindo as áreas transparentes por vermelho (ff0000).
A função aceito como parâmetros, na ordem: o formato, a cor de fundo, bem como a qualidade de compressão (32, 64, 128) e a opacidade (0 ou 1). Por exemplo: |image_aplatir{gif,ffffff,128,1} converterá a umagem em gif de boa qualidade, forçando a transparência do fundo.
As imagens svg (vetoriais) permanecem no seu formato original.
Converter a imagem para preto-e-branco
O filtro image_nb converte uma imagem para níveis de cinzento (o que chamamos de "preto-e-branco", em referência a fotografias).
Sem parâmetros (imagem da esquerda), o filtro calcula os níveis de cinzento ao ponderar os componentes da imagem assim:
luminosidade = 0,299 × vermelho + 0,587 × verde + 0,114 × azul.
Pode-se forçar a ponderação dos três componentes RGB passando-se os valores em por-mil. Por exemplo (imagem da direita):
[(#FICHIER|image_nb{330,330,330})]
Tomou-se cada componente R, G, e B ao mesmo nível.
Converter a imagem para sépia
O filtro image_sepia aplica um filtro "Sépia". Aplicado auma fotografia, este tipo de efeito dá um tom envelhecido à imagem.
Sem parâmetros (imagem da esquerda), o valor sépia é, por padrão, "896f5e" (em RGB hexadecimal). Pode-se passar o valor da cor de sépia como parâmetro. Por exemplo (imagem da direita):
[(#FICHIER|image_sepia{ff0033})]
Modificar a luminosidade da imagem
O filtro image_gamma altera a luminosidade de uma imagem, tornando-a mais clara ou mais escura. O seu parâmetro varia entre -254 e 254. Os valores maiores que zero tornam a imagem mais clara (254 torna a imagem completamente branca) os valores negativos tornam a imagem mais escura (-254 torna a imagem completamente preta).
[(#FICHIER|image_gamma{70})]
[(#FICHIER|image_gamma{150})]
[(#FICHIER|image_gamma{254})]
[(#FICHIER|image_gamma{-70})]
[(#FICHIER|image_gamma{-150})]
[(#FICHIER|image_gamma{-254})]
image_alpha
O filtro image_alpha torna a imagem semi-transparente, em PNG 24 com camada alfa. Se a imagem já é semi-transparente, as duas informações são combinadas.
[(#FICHIER|image_alpha{50})]
[(#FICHIER|image_alpha{90})]
O parâmetro é um valor entre 0 e 127: 0 deixa a imagem inalterada (nenhuma transparência), 127 torna a imagem completamente transparente.
image_flou
O filtro image_flou torna a imagem desfocada. Pode-se passar como parâmetro um número entre 1 e 11, definindo a intensidade do desfoque (de 1 pixel de desfoque a 11 pixels de desfoque).
[(#FICHIER|image_flou)]
[(#FICHIER|image_flou{6})]
Sem parâmetro, o valor de desfoque é 3.
Atenção: este filtro é particularmente pesado (ou seja, demanda muito poder de processamento). Em vez de tentar um desfoque importante, é preferível desfocar várias vezes com valores pequenos. Por exemplo, substituir:
[(#FICHIER|image_flou{6})]
por:
[(#FICHIER|image_flou|image_flou)]
No pior caso, o cálculo será feito em duas recomposições de template, com o primeiro desfoque sendo gravado em cache.
Atenção (2): este filtro aumenta a imagem, adicionando a toda a volta uma "margem" equivalente ao valor do desfoque. Assim, com o parâmetro "3" (padrão), serão incluídos de cada lado da imagem e o resultado terá portanto 6 de largura e de altura a mais do que a imagem original.
image_rotation
O filtro image_rotation rotaciona a imagem num ângulo igual ao parâmetro passado. Os valores positivos rodam no sentido horário.
[(#FICHIER|image_rotation{20})]
[(#FICHIER|image_rotation{-90})]
Exceto para rotações em ângulos retos, a rotação provoca um efeito de escadinha. Tentámos limitá-lo, mas continua sempre presente. Uma solução para reduzir este efeito consiste em reduzir a imagem depois de aplicar a rotação.
Atenção: este filtro é relativamente pesado!
Atenção (2): este filtro altera as dimensões da imagem.
image_flip_vertical et image_flip_horizontal
O filtro image_flip_vertical aplica um efeito de "espelho" segundo o eixo vertical; image_flip_horizontal, segundo o eixo horizontal.
De uso muito simples, não há parâmetro a usar.
[(#FICHIER|image_flip_vertical)]
[(#FICHIER|image_flip_horizontal)]
image_masque
image_masque é o filtro mais poderoso desta série. De facto, a sua lógica é bem mais complexa do que a dos outros filtros. Permite alterar, a partir de um ficheiro PNG-24 em tons de cinzento e com camada de transparência alfa:
— o enquadra,mento da imagem;
— a transparência de uma imagem;
— a luminosidade de uma imagem.
- Dimensões da imagem
Se a imagem original é maior do que o ficheiro da máscara, a imagem original é reduzida e decupada no formato da máscara e, em seguida aplicadas as informações de transparência e de luminosida da máscara. Útil para criar vinhetas de navegação.
Se a imagem original é mais pequena do que a máscara, não é reenquadrada, apenas as informações de luminosidade e de transparência da máscara são aplicadas (ela mesma não redimensionada).
Eis a nossa imagem original:
- Máscara de transparência
As informações de transparência da máscara são aplicadas diretamente na imagem original. Um pixel transparente da máscara torna transparente o pixel correspondente da imagem original, segundo o mesmo valor de transparência. (Se a imagem original já for transparente, as informações são combinadas para conservar as duas informações de transparência.)
Tendo o ficheiro de máscara abaixo, com o nome"recorte1png»:
aplica-se assim:
[(#FICHIER|image_masque{recorte1.png})]
obtém-se a imagem a seguir:
A imagem original foi redimensionada para as dimensões de "recorte1.png", e as áreas transparentes da máscara tornam-se áreas transparentes do resultado.
Atenção! O filtro usa a redução de imagem. Para que funcione corretamente, é obrigatório escolher o método de redução GD2 na configuração do site, no separador "Funções avançadas".
- Máscara de luminosidade
No exemplo acima, a imagem máscara está inteiramente em cinza a 50% (#808080). Deste modo, as cores da imagem original são deixadas sem alteração (foi feita apenas o "recorte" da imagem)..
Ao variar as cores da máscara, aplicam-se essas diferênças à imagem tratada. Quando um pixel da máscara é mais claro, o ficheiro resultante é clareado; se o pixel da máscara é escuro, o ficheiro resultante é escurecido.
Po exemplo, se a nossa máscara é "recorte2.png»:
[(#FICHIER|image_masque{recorte2.png})]
obtém-se a imagem abaixo:
Nestes dois exemplos, a máscara é mais pequena do que a imagem original, obtendo-se assim uma espécie de vinheta da imagem. Se a máscara for maior do que a imagem original, é aplicada à imagem não redimensionada. Isto é útil para "texturizar" uma imagem, podendo assim realizar o efeito a seguir:
aplicando-se uma máscara em tons de cinzento, sendo a máscara maior do que a imagem original.
image_masque aceita diferentes parâmetros que alteram o modo de fusão entre a imagem original e a imagem da máscara.
- mode = normal
Este modo coloca a imagem da máscara sobre a imagem original.
[(#FICHIER|image_masque{#CHEMIN{recorte1.png},mode=normal})]
Obtendo-se a imagem a seguir:
Com o mode=normal, a imagem original é "vazada" pela imagem da máscara. Apenas as áreas transparentes da máscara não afetarão a imagem original.
- mode = eclaircir
Este modo coloca apenas os pontos mais claros da máscara sobre a imagem original.
[(#FICHIER|image_masque{#CHEMIN{recorte1.png},mode=eclaircir})]
obtendo-se a imagem a seguir:
Com o mode=eclaircir, as áreas mais clarar da imagem original são preservadas e as mais escuras são substituídas pelos valores cromáticos da imagem da máscara; aqui, por um cinzento neutro (RGB 149,149,149).
- mode = obscurcir
Este modo coloca apenas os pontos mais escuros da máscara sobre a imagem original.
[(#FICHIER|image_masque{#CHEMIN{recorte1.png},mode=obscurcir})]
obtendo-se a imagem a seguir:
Com o mode=obscurcir, ocorre o inverso: as partes mais escuras da imagem original são preservadas e as mais clars são substituídas pelos valores cromáticos da imagem da máscara; aqui, por um cinzento neutro (RGB 149,149,149).
- mode = produit
Este modo multiplica os valores cromátivos da imagem original pelos da máscara (pontos pretos tornam a imagem preta, pontos brancos não lateram nada).
[(#FICHIER|image_masque{#CHEMIN{recorte1.png},mode=produit})]
obtendo-se a imagem a seguir:
Com o mode=produit, os valores cromáticos de cada pixel da imagem original são multiplicados, resultando geralmente numa imagem mais escura, semelhante ao que o seu software de retoque de imagens pode fazer.
- mode = difference
Este modo "preenche" com a diferença entre as cores do original e as da máscara.
[(#FICHIER|image_masque{#CHEMIN{recorte1.png},mode=difference})]
obtendo-se a imagem a seguir:
Neste modo, os valores cromáticos de cada pixel da imagem original e da imagem da máscara são subtraídos, resultando numa imagem final que lembra um "negativo" da imagem original, na zona da máscara.
Atenção: o impacto sobre a luminosidade é mais importante na imagem final do que no ficheiro da máscara.
Atenção (2): na verdade, a máscara de luminosidade é uma máscara de coloração. Se a imagem da máscara for colorida, serão alteradas não só a luminosidade mas também as cores da imagem. Mas este efeito é particularmente difícil de dominar, particularmente partindo de imagens em cor.
Ver também
Os filtros
A matéria sobre Imagens tipográficas