Focal Point
Permite a los usuarios especificar el punto focal de una imagen para usar durante el recorte, asegurando que las partes importantes de las imágenes no sean recortadas.
focal_point
Install
composer require 'drupal/focal_point:^2.1'
Overview
Focal Point te permite especificar la porción de una imagen que es más importante. Esta información puede usarse cuando la imagen es recortada o recortada y escalada para que no termines, por ejemplo, con una imagen que corta la cabeza del sujeto.
El módulo funciona definiendo el enfoque como un único punto en la imagen, representado como coordenadas X e Y en porcentajes (por ejemplo, "50,50" para el centro). Estos datos del punto focal se almacenan usando el módulo Crop API y luego son utilizados por los efectos de imagen para asegurar que el punto focal permanezca lo más cerca posible del centro de la imagen recortada.
El módulo proporciona una interfaz visual con un indicador de cruz arrastrable que permite a los editores de contenido establecer fácilmente el punto focal en las imágenes subidas. Una función de vista previa está disponible para ver cómo se verá la imagen con diferentes estilos de imagen aplicados.
Features
- Selector interactivo de punto focal con un indicador de cruz arrastrable en las vistas previas de imágenes
- Tres efectos de imagen: Focal Point Crop, Focal Point Scale and Crop y Focal Point Crop by Width
- Página de vista previa en tiempo real que muestra cómo se recortarán las imágenes en todos los estilos de imagen que usan efectos de punto focal
- Integración completa con el módulo Media Library de Drupal para establecer puntos focales en imágenes de entidades multimedia
- Soporte de migración desde datos de punto focal de Drupal 7 a entidades crop de Drupal 9/10/11
- Acceso a vista previa protegido con token CSRF para contenido no guardado
- Campo de punto focal accesible por teclado (doble clic en la cruz para revelar las coordenadas)
- Clic para establecer el punto focal en las imágenes de vista previa
- Valor de punto focal predeterminado configurable por instancia del widget de campo
- Soporte para integración con el navegador de archivos IMCE
Use Cases
Fotografía de retratos
Al mostrar fotos de retratos en diferentes estilos de imagen (banners hero, miniaturas, tarjetas), establece el punto focal en la cara del sujeto. Esto asegura que independientemente de las dimensiones del recorte, la cara de la persona permanezca visible y centrada en lugar de ser cortada en la parte superior del encuadre.
Imágenes de productos con detalles clave
Para imágenes de productos de comercio electrónico donde una característica específica necesita ser destacada (como un logotipo, botón o elemento de diseño único), coloca el punto focal en esa característica. Cuando la imagen se muestra en varios contextos (listado de productos, página de detalle, vista previa del carrito), el detalle importante permanece visible.
Imágenes hero responsivas
Para banners hero que se muestran de forma diferente en escritorio (ancho) vs móvil (estrecho/cuadrado), establecer el punto focal asegura que el sujeto principal de la foto se preserve en ambas vistas. El módulo maneja las diferentes proporciones de recorte automáticamente.
Fotografía de eventos
Para fotos de eventos donde la acción principal o el ponente necesita ser destacado, el punto focal asegura que las miniaturas recortadas y las vistas previas siempre muestren el momento más importante en lugar de recortes arbitrarios desde el centro.
Diseños estilo revista
Al implementar diseños con proporciones de imagen mixtas (imágenes destacadas, barras laterales, cuadrículas de artículos), el punto focal asegura una calidad consistente en todas las ubicaciones sin requerir que los editores suban múltiples versiones recortadas de cada imagen.
Tips
- Haz doble clic en el indicador de cruz del punto focal para revelar los valores exactos de coordenadas en el campo de texto para ajustes precisos
- Puedes hacer clic en cualquier lugar de la imagen de vista previa para mover inmediatamente el punto focal a esa ubicación
- Usa el enlace de Vista previa para ver cómo aparecerá tu imagen en todos los estilos de imagen habilitados con punto focal antes de guardar
- Para campos de imagen de múltiples valores, cada imagen puede tener su propio punto focal independiente
- El punto focal predeterminado (50,50) representa el centro exacto de la imagen - solo cámbialo si el sujeto está descentrado
- Al elegir un estilo de imagen de vista previa para el widget, evita estilos que recorten o cambien la relación de aspecto ya que esto afecta la precisión del punto focal
- Los puntos focales se almacenan como porcentajes, por lo que permanecen precisos incluso si las dimensiones de la imagen original cambian
Technical Details
Admin Pages 1
/admin/focal_point/preview/{fid}/{focal_point_value}
Muestra una vista previa de la imagen original junto con todas las imágenes derivadas generadas por los estilos de imagen que usan efectos de punto focal. Esto permite a los editores de contenido ver exactamente cómo se recortarán sus imágenes antes de guardar el contenido. La vista previa se abre en un diálogo modal y muestra miniaturas de cada estilo de imagen que pueden ser clicadas para ver versiones más grandes.
Hooks 5
hook_entity_insert
Guarda los valores de punto focal para campos de imagen cuando se crean entidades
hook_entity_update
Guarda los valores de punto focal para campos de imagen cuando se actualizan entidades
hook_theme
Define el hook de tema focal_point_preview_page para la plantilla de la página de vista previa
hook_imce_supported_widgets_alter
Añade el widget de punto focal a la lista de widgets soportados de IMCE para la integración del navegador de archivos
hook_form_FORM_ID_alter (media_library_add_form_upload)
Modifica el formulario de subida de Media Library para integrar la funcionalidad de punto focal
Troubleshooting 5
Debes tener al menos un estilo de imagen definido que use un efecto de punto focal (Focal Point Crop, Focal Point Scale and Crop o Focal Point Crop by Width). Navega a /admin/config/media/image-styles y añade efectos de punto focal a tus estilos de imagen.
Asegúrate de que el widget esté configurado con un estilo de imagen de vista previa que NO use efectos de punto focal y que NO altere la relación de aspecto de la imagen original. El estilo thumbnail funciona bien como predeterminado.
Las imágenes derivadas están en caché. Después de cambiar un punto focal, las imágenes antiguas en caché necesitan ser limpiadas. La página de vista previa limpia automáticamente la caché, pero para imágenes en producción puede que necesites limpiar la caché de estilos de imagen o usar image_path_flush().
Asegúrate de que el campo de imagen esté configurado para usar el widget 'Image (Focal Point)' en Gestionar visualización del formulario. El punto focal solo se guarda cuando se usa este widget específico.
Para entidades Media, debes configurar el campo fuente del tipo de Media (típicamente el campo Image en el tipo de media Imagen) para usar el widget 'Image (Focal Point)'. Navega a Estructura > Tipos de medios > Imagen > Gestionar visualización del formulario y actualiza el widget del campo Imagen.
Security Notes 2
- La página de vista previa usa validación de token CSRF para prevenir acceso no autorizado a vistas previas de imágenes para contenido no guardado
- El acceso a archivos en la página de vista previa está restringido a usuarios que tienen permiso para editar entidades que referencian el archivo, o que proporcionan un token de vista previa válido