Media Responsive Thumbnail
Añade un formateador de campo para campos de referencia de Media que muestra imágenes responsivas utilizando el módulo Responsive Image del core de Drupal.
media_responsive_thumbnail
Instalar
composer require 'drupal/media_responsive_thumbnail:^2.0'
Overview
Media Responsive Thumbnail conecta el módulo Media de Drupal con el módulo Responsive Image proporcionando un formateador de campo especializado. Este formateador permite mostrar campos de referencia a entidades Media exactamente como campos de imagen estándar con el formateador Responsive Image.
El módulo resuelve un desafío común en Drupal donde los campos de referencia a media no pueden usar nativamente estilos de imagen responsivos. Al extender el ResponsiveImageFormatter del core, aporta todas las capacidades de imagen responsiva a los campos de media, incluyendo generación apropiada de srcset, soporte para dirección de arte y cambio de resolución.
El formateador detecta automáticamente el campo fuente de la entidad media y lo utiliza para el renderizado. Si el campo fuente está vacío, recurre elegantemente a usar la miniatura de la entidad media. Esto asegura que el formateador funcione de manera confiable en diferentes tipos de media.
Features
- Proporciona un formateador de campo 'Responsive thumbnail' para campos de referencia a entidades que apuntan a entidades media
- Extiende el ResponsiveImageFormatter del core de Drupal para heredar todas las capacidades de imagen responsiva
- Soporta enlazar imágenes a la entidad de contenido padre o al elemento media mismo
- Usa automáticamente el campo fuente del media para mostrar la imagen con respaldo a la miniatura
- Maneja apropiadamente las etiquetas de caché de los estilos de imagen responsivos y estilos de imagen individuales
- Soporta configuración de carga diferida heredada del formateador de imagen responsiva
- Soporte multilingüe completo con generación de URLs consciente del idioma
- Compatible con Drupal 8, 9, 10 y 11
Use Cases
Imágenes hero con múltiples breakpoints
Al construir una sección hero que necesita mostrar diferentes recortes o tamaños de imagen en varios breakpoints, usa este formateador con un estilo de imagen responsiva que defina estilos de imagen apropiados para móvil, tablet y escritorio. Referencia tu imagen hero a través de un campo de referencia a media en lugar de un campo de imagen directo para beneficiarte de la reutilización de la biblioteca Media.
Imágenes destacadas de artículos
Para tipos de contenido de artículos que usan la biblioteca Media para imágenes destacadas, configura la visualización de la imagen destacada para usar el formateador Responsive thumbnail. Esto asegura que tus imágenes destacadas se carguen de manera óptima en todos los dispositivos mientras mantienes los beneficios de la gestión centralizada de media.
Páginas de galería o listados con miniaturas responsivas
Al mostrar elementos media en una vista o contexto de listado, usa este formateador para asegurar que las miniaturas se adapten al espacio disponible. Combinado con un estilo de imagen responsiva que incluya múltiples resoluciones, esto proporciona un rendimiento de carga óptimo en pantallas de alto DPI.
Reemplazar campos Image con campos de referencia a Media
Al migrar de campos Image directos a campos de referencia a Media para aprovechar la biblioteca Media, este formateador te permite mantener el comportamiento de imagen responsiva que estaba disponible anteriormente con el formateador responsivo del campo Image estándar.
Tips
- Crea estilos de imagen responsivos antes de configurar este formateador - necesitas al menos un estilo de imagen responsiva para usar con este formateador
- Usa la opción 'Linked to content' al mostrar media en teasers de artículos para crear miniaturas clicables que lleven al artículo completo
- Habilita la carga diferida para imágenes debajo del fold para mejorar el rendimiento de carga de la página
- El formateador funciona con cualquier tipo de media que tenga un campo fuente de imagen, no solo el tipo de media 'Image'
- Para un rendimiento óptimo, asegúrate de que tus estilos de imagen responsivos incluyan mapeos de estilos de imagen apropiados para anchos de viewport comunes
Technical Details
Troubleshooting 4
El formateador 'Responsive thumbnail' solo aparece para campos de referencia a entidades que específicamente apuntan a entidades media. Verifica que el 'Reference type' de tu campo esté configurado como 'Media' en los ajustes de almacenamiento del campo.
Asegúrate de haber seleccionado un Responsive Image Style válido en los ajustes del formateador. También verifica que las entidades media tengan imágenes fuente válidas subidas y que los estilos de imagen referenciados por el estilo de imagen responsiva existan.
El enlace solo aparece cuando el ajuste 'image_link' está configurado en el formateador. Edita los ajustes de visualización de tu campo y selecciona 'Linked to content' o 'Linked to media item' en la configuración del formateador.
Esto ocurre cuando el campo fuente de la entidad media está vacío. El formateador recurre a la miniatura en este caso. Asegúrate de que tus entidades media tengan su campo fuente principal poblado con una imagen.
Security Notes 2
- Este módulo está cubierto por la política de avisos de seguridad de Drupal
- El formateador verifica apropiadamente el acceso a la entidad antes de renderizar, asegurando que los usuarios solo vean media para el cual tienen permiso de visualización