Crea una galería en Gutenberg
Usa el bloque POM Gallery para organizar imágenes de la biblioteca en una cuadrícula, diseño masonry, slider, carrusel, navegador de miniaturas o presentación a pantalla completa. Esta guía es para editores de contenido que usan el editor de bloques de WordPress con POM activo.
Crea y ordena una galería
- Abre Pages → All Pages o Posts → All Posts y edita tu contenido.
- Inserta Gallery y elige el bloque de POM descrito como "Live media-library galleries with grid, masonry, carousel, thumbnails and full-screen layouts.".
- Selecciona las imágenes de la biblioteca de medios.
- En Gallery images, elige Edit gallery images. Arrastra las miniaturas al orden deseado y selecciona Update gallery.
- Como alternativa, usa Move image earlier, Move image later y Remove image en los ajustes del bloque.
- Guarda la página y previsualízala en una pestaña nueva.
El bloque almacena referencias de adjuntos y opciones, no copias de los metadatos de las imágenes. Los cambios en el texto alternativo, el título, el pie, la descripción, las dimensiones y las fuentes responsive se reflejan en la siguiente renderización sin caché. Borra las cachés de página/CDN al comprobar un cambio de la biblioteca. Refresh library preview actualiza la vista previa del editor sin reemplazar la galería.
Usa un texto alternativo significativo para las imágenes informativas. Elige adjuntos de imagen públicos; los adjuntos no disponibles, privados o en la papelera se omiten. Importa imágenes externas a la biblioteca antes de añadirlas. Una galería admite hasta 500 entradas de imagen y 100 entradas de vídeo.
Elige un diseño
| Diseño | Uso y controles |
|---|---|
| Grid | Filas regulares. Elige Columns, Mobile columns (below 768px), Image size y Item padding. |
| Masonry | Acomoda los elementos en columnas. Elige un tamaño de imagen sin recortar cuando quieras proporciones de imagen diferentes. Los ajustes de columnas y móvil también se aplican. |
| Slider | Una diapositiva cada vez, con altura fija o adaptativa opcional. |
| Carousel | Una franja horizontal con imágenes vecinas visibles. Establece Image height (px) y, opcionalmente, elimina los huecos del carrusel. |
| Image with thumbnails | Un slider principal y una navegación de miniaturas enlazada de forma independiente. Establece su altura de imagen y el comportamiento de navegación. |
| Full screen | Diapositivas verticales solo de imagen que llenan la altura del área de visualización. Los visitantes pueden usar gestos verticales o paginación. |
Las opciones de columnas son 1, 2, 3, 4, 6 y 12. El ajuste móvil predeterminado usa una columna por debajo de 576px y el número de columnas principal a partir de 576px. Un número de columnas móvil explícito se aplica por debajo de 768px. El número principal se aplica a partir de 768px.
Item padding usa los helpers en rem del tema: 0, 0,375, 0,75, 1, 1,25, 2, 3, 4, 6 y 8rem. El espacio entre imágenes adyacentes es el doble del relleno del elemento. Un rem sigue el tamaño de fuente raíz.
Los diseños slider, carrusel y miniaturas ofrecen flechas, arrastre, bucle, altura adaptativa, números de diapositiva y reproducción automática. La altura se limita a 1–4.000px y los intervalos de reproducción automática a 1–10 segundos. Activa la reproducción automática solo cuando ayude a los visitantes; comprueba que la galería siga siendo comprensible sin movimiento.
En Carousel, las imágenes siempre usan Image height (px). Equal slide container heights además fija los contenedores de diapositiva a esa altura, incluidas las diapositivas de vídeo. En Slider, Fixed image height controla si se aplica la altura fija. Los diseños de miniaturas siempre usan su altura configurada.
Edit gallery images está disponible tanto en la barra lateral como en la barra de herramientas flotante del bloque. Cambiar el diseño conserva la selección y los ajustes ocultos; solo los ajustes admitidos por el diseño activo afectan a su salida.
Añade superposiciones y acciones de lightbox
Para Grid y Masonry, abre Overlay:
- Elige Display overlay: None, On hover, Hide on hover o Always.
- Elige un fondo sólido o un degradado inferior, un color de la paleta del tema y una opacidad en pasos del 10%.
- Establece la alineación, el marco, el comportamiento de entrada del puntero y el zoom al pasar el ratón según necesites.
- Elige el título, el pie, la descripción, el icono de lightbox, el título enlazado, el icono de enlace o el botón.
El contenido de la superposición proviene de la biblioteca de medios. Los enlaces de destino usan el destino de biblioteca configurado de la imagen. Los botones usan los estilos de botón configurados en el tema.
En Click and lightbox, Open lightbox from the whole image tiene prioridad sobre el enlace de destino de toda la imagen. El icono de lightbox puede permanecer activado: él y la portada de la imagen abren el mismo elemento de la galería. Los enlaces de destino de la superposición permanecen independientes.
Show image description in lightbox usa la descripción actual de la biblioteca. Las imágenes de slider, carrusel y miniaturas abren el lightbox automáticamente. El modo a pantalla completa usa su propia navegación vertical en su lugar.
Incluye vídeos
Abre Videos after images, selecciona Add video e introduce una URL de YouTube o Vimeo. Elige una miniatura de biblioteca y una relación de aspecto opcionales. Usa Move video earlier y Move video later para cambiar su orden. Los vídeos aparecen después de las imágenes ordenadas. El modo a pantalla completa es solo de imagen; los ajustes de vídeo se conservan si cambias de diseño, pero no se renderizan en ese modo.
El editor muestra un póster o un marcador de posición, no una incrustación de terceros en reproducción. Comprueba la reproducción en el frontend. Siguen aplicándose la disponibilidad del proveedor, los ajustes de privacidad y cualquier requisito de consentimiento del sitio.
Previsualiza y comprueba
El editor refleja los colores del tema, los componentes de imagen y los estilos efectivos de la galería. Preview overlay y los botones de vista previa anterior/siguiente te permiten inspeccionar la presentación sin seguir enlaces. La vista previa del carrusel muestra una diapositiva individual; el movimiento del frontend, la disposición completa de diapositivas vecinas, el empaquetado masonry y la reproducción de vídeo deben comprobarse en una vista previa en pestaña nueva.
Antes de publicar:
- Comprueba el orden de las imágenes, el texto alternativo, el recorte y la calidad de la imagen.
- Revisa las vistas previas de móvil, ambas orientaciones de tablet, escritorio y Very Large.
- Comprueba las flechas, la navegación de miniaturas, el número de elementos del lightbox y los enlaces de destino.
- Si usas varias galerías, comprueba que cada franja de miniaturas controle solo su propio slider principal.
- Usa Visibility para ocultar toda la galería en los dispositivos seleccionados; los bloques ocultos siguen siendo seleccionables en el editor.
- Usa Advanced → HTML anchor solo para un ID único. Additional CSS classes acepta los helpers existentes del tema.
Random order cambia el orden del frontend en cada renderización sin caché, no en cada visita a una página cacheada. El editor conserva el orden guardado para una edición predecible.
Si la vista previa está vacía, comprueba el estado del adjunto y la URL del vídeo. Si los metadatos o los scripts parecen desactualizados, actualiza la vista previa de la biblioteca y borra las cachés de página/navegador correspondientes. Si una imagen está borrosa, selecciona un Image size mayor en lugar de estirar una miniatura.