Blazy
Proporciona carga diferida de medios utilizando bLazy, Intersection Observer API o carga diferida nativa del navegador para optimizar el ancho de banda y las solicitudes al servidor.
blazy
Install
composer require 'drupal/blazy:^3.0'
Overview
Blazy es una solución integral de carga diferida de medios para Drupal que se integra con la biblioteca bLazy, Intersection Observer API y la carga diferida nativa del navegador para retrasar la carga de imágenes fuera de la vista hasta que sean necesarias. Esto ahorra ancho de banda y reduce las solicitudes al servidor, resultando en tiempos de carga más rápidos para los usuarios.
El módulo soporta una amplia variedad de tipos de medios incluyendo imágenes del core, imágenes responsive, videos locales y remotos, archivos SVG e iframes. Proporciona Field formatters para mostrar medios con carga diferida, diseños de cuadrícula (CSS3 Columns, Flexbox, Native Grid) e integraciones con lightbox como Colorbox, Magnific Popup, PhotoSwipe y los lightboxes integrados Blazybox/Flybox.
Blazy sirve como base para muchos otros módulos de Drupal incluyendo Slick, Splide, GridStack, Mason y otros, proporcionando una API unificada para el manejo de medios, visualizaciones en cuadrícula y funcionalidad de lightbox.
Features
- Carga diferida para imágenes, imágenes responsive, videos, iframes y SVG usando Intersection Observer API o carga diferida nativa del navegador
- Imágenes con carga diferida multi-servicio con soporte de fondo CSS multi-breakpoint
- Field formatters para campos Image, Media, Entity Reference, File/SVG, OEmbed y Text
- Diseños de cuadrícula: CSS3 Columns, Grid Foundation, Flexbox y Native Grid con CSS3 Masonry
- Integraciones con lightbox: Colorbox, Magnific Popup, PhotoSwipe, además de Blazybox y Flybox integrados
- Blazy Filter para imágenes e iframes en línea en contenido de texto con soporte de shortcode
- Integración con Views mediante el plugin de estilo Blazy Grid y campos de Views para File y Media
- Efectos de imagen incluyendo efecto de placeholder desenfocado con opciones de caché del lado del cliente y localStorage
- Soporte de imágenes responsive con optimización de placeholder de 1px
- Soporte SVG con renderizado en línea y sanitización (requiere la biblioteca enshrined/svg-sanitize)
- Soporte WEBP con polyfill para navegadores antiguos
- Soporte de relación de aspecto con proporciones fluidas y fijas
- Funciona sin JavaScript para sitios estáticos/archivados (AMP, Tome, HTTrack)
- Configuración de formatter de terceros para habilitar Blazy en cualquier formatter de imagen
- Soporte de subtítulos con subtítulos de lightbox configurables por campo
Use Cases
Galerías de Imágenes con Carga Diferida
Use el formateador Blazy Image en campos de imagen con valores múltiples para crear galerías de imágenes con carga diferida. Habilite un lightbox (Colorbox, Magnific Popup, PhotoSwipe) en la opción 'Media switcher'. Seleccione el estilo 'Blazy Grid' con el tipo de cuadrícula deseado (Native Grid, Flexbox, CSS Columns) para diseños de galería responsivos automáticos.
Galerías de Video/Medios con Imágenes de Portada
Use el formateador Blazy Media en campos de referencia de entidad que apunten a Media. Configure 'Media switcher' como 'Image to iframe' para mostrar imágenes de portada que cambian a reproductores de video al hacer clic. Añada field_media_image a los bundles Video y Remote video para imágenes de portada personalizadas.
Optimización de Imágenes Responsivas
Habilite 'Responsive image 1px placeholder' en la configuración de Blazy UI y seleccione un estilo de Responsive image en el formateador Blazy. Esto utiliza un marcador de posición de URI de datos de 1px para evitar la descarga de imágenes de respaldo mientras mantiene el comportamiento de imagen responsiva.
Efecto de Marcador de Posición Difuminado
Seleccione 'blur' en Image effect en la configuración de Blazy UI. Configure el estilo Thumbnail en el formateador para el tamaño del marcador de posición difuminado. Habilite 'Use client-side blur' y 'Store blur in localStorage' para un rendimiento óptimo.
Visualización de Cuadrícula en Views con Lightbox
Cree una View con el plugin de estilo Blazy Grid en Format. Añada un campo de Views con formateador Blazy (blazy_file o blazy_media). Configure el lightbox en el formateador. La cuadrícula agrupa automáticamente los elementos para la navegación de galería del lightbox.
Carga Diferida de Contenido en Línea
Habilite el filtro Blazy en /admin/config/content/formats en el formato de texto deseado. Use shortcodes para funciones avanzadas: [blazy grid="nativegrid:2-3-4"]..imágenes..[/blazy] para cuadrículas, o [blazy data="node:44:field_media" /] para incrustar campos de medios de entidades en línea.
Layout Builder con Fondos de Medios
Habilite el submódulo Blazy Layout. En Layout Builder, añada una sección Blazy Layout. Configure fondos de región usando Media Library (requiere el módulo Media library form element) o añadiendo campos de Content block con formateador Blazy y 'Use CSS background' habilitado.
SVG con Renderizado en Línea
Instale la biblioteca enshrined/svg-sanitize mediante Composer. Use el tipo de campo File para cargas de SVG. Aplique el formateador Blazy File con la opción de SVG en línea habilitada para renderizado directo de SVG con sanitización.
Tips
- Haga coincidir las versiones del módulo entre Blazy y sus submódulos (Slick, Splide, etc.) - DEV con DEV, estable con estable - para evitar problemas de compatibilidad.
- Use el estilo de Views Blazy Grid con campos de 'Blazy formatter' para agrupación automática de galería lightbox en los resultados de Views.
- Para rendimiento, habilite 'No JavaScript > Lazyload' en Blazy UI si solo usa carga diferida nativa del navegador y no necesita efectos de difuminado o fondos CSS.
- La función auxiliar blazy() proporciona acceso rápido al servicio BlazyManager en código procedural.
- Use hook_blazy_settings_alter() para añadir relaciones de aspecto personalizadas sin estilos de padding en línea configurando los valores de blazies css.ratio.
- Los shortcodes de Blazy Filter soportan incrustación de entidades: [blazy data="node:123:field_media" /] renderiza el campo de medios de un node en línea.
- Para desarrollo, verifique la consola del navegador para el objeto 'blazy' que expone información de depuración.
- Blazy maneja automáticamente Content Security Policy a través de su suscriptor de eventos CspSubscriber.
- Use la opción 'By delta' en el formateador para mapear elementos de medios específicos de un campo con valores múltiples a diferentes regiones de Layout Builder.
Technical Details
Admin Pages 1
/admin/config/media/blazy
Configura los ajustes globales de Blazy para el comportamiento de carga diferida, efectos de imagen, polyfills y opciones de la API IntersectionObserver.
Permissions 1
Hooks 9
hook_blazy_attach_alter
Modifica los adjuntos de Blazy para agregar bibliotecas personalizadas, drupalSettings o plantillas JS.
hook_blazy_lightboxes_alter
Modifica las opciones de lightbox disponibles para el selector Media switch en la configuración del formateador.
hook_blazy_alter
Modifica la salida individual de elementos Blazy para soportar lightboxes personalizados o modificar el renderizado de imágenes/videos.
hook_blazy_build_alter
Modifica toda la salida de Blazy para agregar envoltorios, prefijos o modificar contenedores de cuadrícula.
hook_blazy_base_settings_alter
Modifica la configuración base del formateador relacionada con Blazy para agregar opciones personalizadas en todos los formateadores.
hook_blazy_settings_alter
Modifica la configuración de Blazy heredada por todos los elementos hijos. Se invoca para formateadores y Views.
hook_blazy_item_alter
Modifica la configuración individual de elementos Blazy, útil para la personalización de contenido multimedia mixto.
hook_blazy_form_element_alter
Modifica los elementos de formulario del formateador relacionados con Blazy antes de la finalización. Mejor lugar para agregar nuevos elementos de formulario.
hook_blazy_complete_form_element_alter
Modifica los elementos de formulario del formateador relacionados con Blazy después de la finalización. Útil para modificar elementos existentes.
Troubleshooting 7
Verifique si está usando un contenedor con desplazamiento (modal, parallax). Añada el selector CSS del contenedor a 'Scrolling container' en la configuración de Blazy UI. Intente desmarcar 'Disconnect' en la configuración de IO. Asegúrese de que las imágenes tengan dimensiones adecuadas o relación de aspecto configurada.
Habilite la opción 'Load invisible' en la configuración de Blazy UI en la sección 'Blazy settings' para cargar elementos ocultos.
La sanitización de Views elimina los URIs data:image. Configure el campo 'Placeholder' en Blazy UI con una ruta URL a un archivo blank.svg o blank.gif ubicado en la raíz web de Drupal.
Asegúrese de que el estilo de imagen Thumbnail esté configurado en los ajustes del formateador. Verifique que 'Blur min-width' no esté configurado demasiado alto. Verifique que la relación de aspecto esté configurada para evitar imágenes colapsadas.
Al usar Views, desmarque 'Use field template' en Style settings. Esto permite que Blazy agrupe los elementos en una sola galería en lugar de galerías por campo.
Instale la biblioteca SVG Sanitizer: composer require enshrined/svg-sanitize. Limpie las cachés después de la instalación.
Instale la biblioteca DOMPurify: composer require npm-asset/dompurify. Colóquela en /libraries/dompurify/dist/purify.min.js. Sin ella, solo se aplica sanitización básica del lado del servidor.
Security Notes 5
- El permiso 'administer blazy' está marcado como 'restrict access: true' - solo otórguelo a administradores de confianza.
- El renderizado en línea de SVG requiere la biblioteca enshrined/svg-sanitize para protección contra XSS.
- Los subtítulos HTML del lightbox deben usar la biblioteca DOMPurify para sanitización del lado del cliente de contenido generado por usuarios.
- La opción 'Trust data URI' del Blazy Filter tiene implicaciones de seguridad - solo habilítela para editores de contenido de confianza.
- Al usar shortcodes [blazy data="..."] en contenido de texto, asegúrese de que el formato de texto esté restringido a usuarios de confianza.