focuspoint para TYPO3: Recorte inteligente de imágenes

focuspoint evita que las imágenes pierdan las áreas importantes del motivo al recortarse de forma responsive, ya que la extensión fija un punto focal en el que el recorte queda alineado con cualquier relación de aspecto

Quien usa imágenes en un sitio responsive conoce el problema: un retrato vertical que en el teaser solo mide 200 píxeles de alto muestra de pronto solo el cuello o la frente. Una foto de paisaje que aparece como franja estrecha en el área hero muestra el cielo en lugar de las montañas. El centrado automático lleva a que los motivos principales queden cortados, porque el centro matemático rara vez coincide con el centro real del motivo. focuspoint lo resuelve: los redactores fijan en el backend un punto de la imagen que debe mantenerse visible en cada recorte. La salida se adapta a cualquier relación de aspecto sin tener que generar una variante de imagen propia por cada formato.

La diferencia con un pipeline clásico de edición de imagen con recortes fijos es grande. En lugar de mantener para desktop, tablet y móvil una versión recortada por separado, hay una imagen original con un punto focal y tantos formatos de salida como se quiera, calculados automáticamente por el sistema. Para redacciones con muchas imágenes eso reduce drásticamente el tiempo de mantenimiento, y para marketing abre la posibilidad de introducir nuevas relaciones de aspecto de imagen sin retrabajo.

Escenarios típicos de uso

El primer caso clásico son las páginas de persona y equipo. Una web corporativa muestra retratos de empleados en distintos layouts: como avatar redondo en la cabecera, como baldosa cuadrada en la lista de equipo, como formato ancho en la página de detalle. Sin punto focal, el fotógrafo debe encuadrar exactamente al centro o la redacción crea una variante por cada layout. Con focuspoint la redacción fija una vez un punto sobre la cara y la imagen funciona en todos los contextos.

El segundo caso son las fotos de producto y de espacios. Agentes inmobiliarios, hoteleros y tiendas de muebles trabajan con fotos en las que el motivo real - un sofá, una vista de habitación, un detalle de producto - no está en el centro de la imagen. focuspoint permite seleccionar exactamente ese motivo y garantiza que no se pierda tampoco en móviles.

Tercer uso: teasers de revista y artículo. Las imágenes editoriales de artículo tienen a menudo un punto de interés claro, por ejemplo un ponente en un escenario o un producto en una escena. En listas de teaser con miniaturas verticales, ese punto de interés quedaría frecuentemente fuera del encuadre sin punto focal.

Arquitectura técnica

focuspoint amplía el sistema FAL de TYPO3 con dos campos de metadatos adicionales: focus_point_x y focus_point_y. Ambos se mantienen en el backend mediante un elemento de formulario que muestra la imagen original como área de selección. El redactor hace clic sobre el punto relevante, la posición relativa se guarda. Técnicamente son dos valores en coma flotante entre cero y uno que describen la fracción del ancho y del alto de la imagen.

Al renderizar en el frontend, el punto focal lo evalúa el ViewHelper Fluid. En lugar del ViewHelper estándar “f:image”, la extensión utiliza un ViewHelper propio que realiza el cálculo del recorte teniendo en cuenta el punto focal y genera la imagen mediante el pipeline GIFBUILDER de TYPO3 en el tamaño objetivo deseado. El resultado se cachea y solo se regenera si hay cambios.

La extensión convive con todos los formatos de imagen habituales (JPEG, PNG, WebP, AVIF) y utiliza para el procesamiento propiamente dicho ImageMagick o GraphicsMagick, es decir, el mismo stack sobre el que TYPO3 se apoya de todos modos. Para lazy loading e integración srcset no hay conflictos: el ViewHelper puede anidarse en elementos picture con varias sources y entrega para cada breakpoint el recorte adecuado.

Problemas frecuentes y soluciones

El primer problema es el orden de los ViewHelpers. Quien integra focuspoint en plantillas existentes que ya trabajan con “f:image” y argumentos de recorte manuales debe poner el ViewHelper de focuspoint en el lugar del estándar, no alrededor. De lo contrario, ambas lógicas corren una contra otra y el resultado ignora el punto focal. La solución es una migración limpia de todas las referencias de imagen del sitepackage al nuevo ViewHelper.

Segundo problema: invalidación de caché. Cuando los redactores cambian el punto focal, la caché de imagen debe descartarse, si no seguirán viendo el recorte antiguo. TYPO3 vacía normalmente la caché de imagen en cambios de la imagen original, no en cambios de metadatos. La solución es un EventListener que, ante cambios en los campos del punto focal, borre específicamente los processed files afectados.

Tercer problema: resultados inconsistentes entre la previsualización del backend y el frontend. La previsualización del backend usa una ruta de renderizado distinta a la del frontend, lo que puede llevar a pequeñas diferencias. Solución pragmática: en el backend mostrar solo una vista previa aproximada y remitir a los redactores al frontend como referencia vinculante.

Migración y compatibilidad de versiones

TYPO3 trae desde la versión 9 un editor de recorte nativo en el backend que permite variantes individuales por imagen. Para casos de uso sencillos basta. focuspoint se distingue en que el punto focal se fija una vez y se propaga automáticamente a todas las variantes de recorte, en lugar de editar cada variante por separado. Quien tiene muchas imágenes y poco tiempo de redacción sale mejor a largo plazo con focuspoint.

La extensión es compatible con TYPO3 v11, v12 y v13. Al actualizar desde versiones más antiguas, la estructura de metadatos FAL y los ViewHelpers utilizados deberían adaptarse a la sintaxis actual.

Una nueva clase de alternativas son las detecciones de saliency asistidas por IA, que derivan el punto focal automáticamente del contenido de la imagen. Esos enfoques reducen aún más el trabajo editorial, porque los redactores ya no tienen que fijar el punto, sino solo corregirlo en casos excepcionales. Para TYPO3 hay primeras integraciones de esta técnica, pero aún no son estándar y deberían evaluarse por proyecto.

Gosign configura focuspoint y lo integra en arquitecturas Fluid. El análisis asistido por IA de los layouts de diseño sugiere presets de recorte óptimos para todos los breakpoints, de modo que los redactores no tienen que probar cada formato por separado en el mantenimiento de imágenes.