Uso de Reel

Preparar la galería

1. Activa zoom y lightbox en Reel.
2. Ajusta una escala que permita ver detalle sin sacar la imagen de contexto.
3. Mantén desactivado el zoom táctil salvo que hayas probado los gestos de tu tema.
4. Comprueba imágenes verticales, horizontales y productos con una sola imagen.

El lightbox funciona mejor cuando las imágenes originales tienen resolución suficiente. Reel no puede crear detalle que no existe en el archivo de origen.

Publicar un vídeo

Añade la URL al campo personalizado _reel_video_url del producto y, si lo necesitas, un título en _reel_video_title. Reel puede usar un archivo directo compatible o pedir a WordPress el HTML oEmbed de la URL. Después elige una posición global y revisa que el vídeo no compita con la información principal de compra.

Un producto sin URL no muestra un contenedor vacío. Si desactivas globalmente el vídeo, tampoco se imprime aunque el producto conserve sus metadatos.

Shortcode

Muestra el vídeo del producto actual:

[reel_video]

Selecciona otro producto:

[reel_video id="123"]

Controla el título en esa instancia:

[reel_video id="123" title="hide"]
[reel_video id="123" title="show"]

id debe corresponder a un producto. title acepta show o hide y permite sobrescribir la visibilidad global para el shortcode.

Bloque Reel: Featured video

El bloque incluye dos atributos principales:

• productId, ID del producto;
• showTitle, visibilidad del título.

En el editor muestra un marcador cuando el producto no tiene vídeo. En el escaparate no imprime nada en ese caso. Esto permite preparar una plantilla sin dejar un marco vacío para productos incompletos.

Caché del vídeo

Una resolución correcta se conserva durante una hora y una vacía durante cinco minutos. La clave cambia cuando cambian el producto, la URL o autoplay.

Si acabas de corregir una URL inválida, guarda el producto con la nueva URL para generar otra clave. Cuando sólo cambias el título o la posición, el embed puede mantenerse hasta el vencimiento, aunque su contenedor adopte el ajuste nuevo según el flujo de renderizado.

Recorrido accesible del lightbox

Prueba esta secuencia:

1. Llega al disparador con Tab.
2. Ábrelo con Enter o barra espaciadora.
3. Confirma que el foco pasa al diálogo.
4. Recorre sus controles sin salir al contenido del fondo.
5. Cierra con Escape.
6. Verifica que el foco vuelve al disparador.

El cierre al pulsar el fondo es opcional. No reemplaza el botón de cierre ni Escape. Reel reduce las transiciones cuando el sistema indica prefers-reduced-motion.

Rendimiento

Los recursos interactivos sólo se encolan en una página de producto y cuando están activos. El script es JavaScript nativo y no añade su propia dependencia de jQuery. El marco de vídeo usa aspect-ratio: 16 / 9 para reservar espacio antes de que termine de cargar el medio.

Si Polski for WooCommerce ya gestiona estas funciones, conserva una sola implementación. Revisa otros módulos de escaparate para identificar el solapamiento.