focuspoint para TYPO3: Recorte inteligente de imagens

focuspoint impede que imagens, no recorte responsivo, percam áreas importantes do motivo, a extensão define um ponto focal no qual o recorte permanece alinhado em qualquer proporção

Quem usa imagens em um site responsivo conhece o problema: um retrato em formato vertical que aparece em um teaser com apenas 200 pixels de altura mostra de repente só o pescoço ou a testa. Uma foto de paisagem que aparece em um hero como faixa estreita mostra o céu em vez das montanhas. O centramento genérico faz com que motivos principais sejam cortados, porque o centro matemático raramente coincide com o centro real do motivo. O focuspoint resolve isso permitindo que os redatores definam no backend um ponto na imagem que precisa permanecer visível em qualquer recorte. A saída se adapta a todas as proporções, sem que para cada formato uma variante própria precise ser gerada.

A diferença em relação a uma pipeline clássica de edição de imagens com recortes fixos é grande. Em vez de manter para desktop, tablet e mobile uma versão recortada separadamente, há uma imagem original com um ponto focal e qualquer quantidade de formatos de saída que o sistema calcula automaticamente. Para redações com muitas imagens, isso reduz dramaticamente o tempo de manutenção, e para o marketing abre a possibilidade de introduzir novas proporções de imagem sem retrabalho.

Cenários típicos de uso

O primeiro caso clássico são páginas de pessoas e equipe. Um site corporativo mostra retratos de colaboradores em vários layouts, como avatar redondo no header, quadrado como tile na lista de equipe, formato wide na página de detalhe. Sem ponto focal, o fotógrafo precisa fotografar exatamente centralizado, ou a redação cria para cada layout uma variante própria. Com focuspoint, a redação define uma vez um ponto no rosto e a imagem funciona em todos os contextos.

O segundo caso são fotos de produto e de ambientes. Imobiliárias, hotéis e lojas de móveis trabalham com fotos em que o motivo real, um sofá, uma vista do quarto, um detalhe de produto, não fica no centro da imagem. O focuspoint permite selecionar exatamente esse motivo e garante que ele não se perca em dispositivos móveis.

Terceiro uso: teasers de revista e artigo. Fotos editoriais de artigo frequentemente têm um foco visual claro, como um palestrante em um palco ou um produto em uma cena. Em listas de teaser com thumbnails verticais, esse foco visual ficaria frequentemente fora do recorte sem ponto focal.

Arquitetura técnica

O focuspoint estende o sistema FAL do TYPO3 com dois campos adicionais de metadado: focus_point_x e focus_point_y. Os dois são mantidos no backend via um elemento de formulário que exibe a imagem original como área de seleção. O redator clica no ponto relevante, a posição relativa é salva. Tecnicamente, são dois valores de ponto flutuante entre zero e um, descrevendo a fração da largura ou altura da imagem.

Na renderização do frontend, o ponto focal é avaliado pelo ViewHelper Fluid. Em vez do ViewHelper “f:image” usual, a extensão usa um ViewHelper próprio que realiza o cálculo de recorte considerando o ponto focal e gera a imagem no tamanho desejado via pipeline GIFBUILDER do TYPO3. O resultado é cacheado e regerado apenas em mudanças.

A extensão convive com todos os formatos de imagem comuns, JPEG, PNG, WebP, AVIF, e usa para o processamento real de imagem o ImageMagick ou GraphicsMagick, ou seja, o mesmo stack sobre o qual o TYPO3 já roda. Para lazy loading e integração srcset não há conflitos: o ViewHelper pode ser aninhado em elementos picture com várias sources e entrega para cada breakpoint o recorte certo.

Problemas frequentes e soluções

O primeiro problema é a ordem dos ViewHelpers. Quem insere focuspoint em templates existentes que já trabalham com “f:image” e argumentos de crop manuais precisa colocar o ViewHelper focuspoint no lugar do padrão, não ao seu redor. Caso contrário, as duas lógicas rodam uma contra a outra e o resultado ignora o ponto focal. A solução é uma migração limpa de todas as referências de imagem no site package para o novo ViewHelper.

Segundo problema: invalidação de cache. Quando redatores alteram o ponto focal, o cache de imagem precisa ser descartado, caso contrário continuam vendo o recorte antigo. O TYPO3 normalmente limpa o image cache em mudanças na imagem original, não em mudanças de metadado. A solução é um EventListener que, em mudanças nos campos de ponto focal, apaga de forma direcionada os processed files afetados.

Terceiro problema: resultados inconsistentes entre prévia no backend e frontend. A prévia no backend usa um render path diferente do frontend, o que pode levar a pequenos desvios. Solução pragmática: mostrar no backend apenas uma prévia aproximada e apontar os redatores para o frontend como referência definitiva.

Migração e compatibilidade de versões

O TYPO3 traz desde a versão 9 um crop editor nativo no backend que permite variantes individuais por imagem. Para casos de uso simples, isso basta. O focuspoint se diferencia por definir o ponto focal uma única vez, que flui automaticamente para todas as variantes de crop, em vez de editar cada variante individualmente. Quem tem muitas imagens e pouco tempo editorial se sai melhor com focuspoint a longo prazo.

A extensão é compatível com TYPO3 v11, v12 e v13. No upgrade de versões mais antigas, a estrutura de metadados FAL e os ViewHelpers usados devem ser levados para a sintaxe atual.

Uma nova classe de alternativas são detecções de saliency com suporte de IA, que derivam o ponto focal automaticamente do conteúdo da imagem. Essas abordagens reduzem ainda mais o trabalho editorial, porque os redatores não precisam mais definir o ponto e só corrigem em exceções. Para TYPO3 existem primeiras integrações dessa técnica, mas ainda não são padrão e devem ser avaliadas caso a caso.

A Gosign configura focuspoint e o integra em arquiteturas de Fluid Templates. Análise com suporte de IA dos layouts de design sugere presets de crop ideais para todos os breakpoints, de forma que redatores, na manutenção de imagens, não precisem testar cada formato individualmente.