web_gallery Shortcode
El shortcode web_gallery renderiza el componente de galería.
Los atributos que se indican a continuación coinciden con los controles actuales del Page Builder y con el resultado público. Utiliza solo la sintaxis en bruto para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_gallery]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
gallery_mode |
— | Cadena, salvo que se indique lo contrario | Controla el modo de la galería. |
gallery_random_mode |
— | yes |
Muestra las imágenes en un orden distinto cada vez que se carga la página. |
gallery_image_size |
thumbnail |
Cualquier slug de tamaño de imagen registrado en WordPress | Selecciona el tamaño de imagen generado que utilizan los elementos de la galería. |
gallery_style |
grid |
grid, masonry, carrousel, carousel_2, full_screen, image_with_thumbnails |
Elige el estilo de la galería. |
gallery_popup_elements |
— | description |
Elementos que se mostrarán en la ventana emergente de la imagen. |
gallery_go_to_link_event |
none |
none, same-page, other-window |
Si la imagen tiene un enlace, selecciona qué hacer al hacer clic. |
gallery_xfn |
— | Cadena, salvo que se indique lo contrario | Se colocará en el parámetro rel=\"\" del enlace. Se aplicará a todos los enlaces de la galería. |
gallery_images |
— | Cadena, salvo que se indique lo contrario | Selecciona las imágenes que se mostrarán en la galería. Disponible condicionalmente según gallery_mode. |
gallery_videos |
— | Cadena, salvo que se indique lo contrario | Añade vídeos de Youtube o Vimeo. Disponible condicionalmente según gallery_mode. |
gallery_column_number |
3 |
1, 2, 3, 4, 6, 12 |
¿Cuántas columnas quieres que aparezcan en una fila?. Disponible cuando gallery_style es grid o masonry. |
gallery_mobile_column_number |
default |
default, 1, 2, 3, 4, 6, 12 |
¿Cuántas columnas quieres que aparezcan en una fila (en móvil)? Solo funciona si es Grid. No funciona con Isotope. Disponible cuando gallery_style es grid o masonry. |
gallery_column_spacing |
5 |
0, 1, 5, 10, 15 |
Espaciado entre las imágenes. Disponible cuando gallery_style es grid o masonry. |
gallery_overlay |
hover |
hover, hide-on-hover, always |
Controla la superposición. Disponible cuando gallery_style es grid o masonry. |
gallery_image_lightbox_click_full |
— | yes |
Hace que la imagen completa abra el lightbox. El icono de vista puede permanecer habilitado; ambos controles abren el mismo elemento. Disponible cuando gallery_style es grid o masonry. |
gallery_carousel_show_numbers |
— | yes |
Controla la activación de la numeración del carrusel. Disponible cuando gallery_style es carrousel. |
gallery_carousel_adaptive_height |
yes |
yes |
Si está marcada, la altura del carrusel se adaptará a cada celda. Disponible cuando gallery_style es carrousel. |
gallery_carousel_cells_loop |
yes |
yes |
Si está marcada, se permitirá el bucle infinito. Disponible cuando gallery_style es carrousel o carousel_2. |
gallery_carousel_draggable |
yes |
yes |
Permite arrastrar a través de las diapositivas. Disponible cuando gallery_style es carrousel o carousel_2. |
gallery_carousel_autoplay |
— | yes |
Si está marcada, las imágenes rotarán por sí solas. Disponible cuando gallery_style es carrousel o carousel_2. |
gallery_carousel_autoplay_speed |
2000 |
Número | Selecciona la velocidad del carrusel. Disponible cuando gallery_carousel_autoplay es yes. |
gallery_display_arrows |
yes |
yes |
Si está marcada, las flechas serán visibles. Disponible cuando gallery_style es carrousel o carousel_2. |
gallery_carousel_gap |
— | yes |
Si está marcada, no habrá espacios entre las imágenes. Disponible cuando gallery_style es carousel_2. |
gallery_same_dimensions |
— | yes |
Si está marcada, todas las imágenes tendrán las mismas dimensiones. Disponible cuando gallery_style es carousel_2. |
carousel_height_in_pixels |
500 |
Número | Especifica la altura del carrusel en píxeles. La casilla de las mismas dimensiones debe estar habilitada. Disponible cuando gallery_same_dimensions es yes. |
gallery_overlay_effect |
— | gradient |
Elige el estilo de superposición de la imagen. Disponible cuando gallery_overlay es hover o hide-on-hover o always. |
gallery_overlay_frame |
— | yes |
¿Añadir un marco a la superposición?. Disponible cuando gallery_overlay es hover o hide-on-hover o always. |
gallery_overlay_enter_mode |
— | follow |
¿Hacer que la superposición entre por el mismo lado por el que entra el cursor?. Disponible cuando gallery_overlay es hover. |
gallery_overlay_zoom |
yes |
yes |
Habilita el zoom de la imagen al pasar el cursor. Disponible cuando gallery_overlay es hover o hide-on-hover o always. |
gallery_overlay_elements |
title,description,view_icon,link_icon |
title, caption, description, view_icon, link_icon, button |
Elementos que se mostrarán en la superposición de la imagen. Disponible cuando gallery_overlay es hover o hide-on-hover o always. |
gallery_button_text |
Read more |
Cadena, salvo que se indique lo contrario | Controla el texto de «leer más». Disponible cuando gallery_overlay_elements es button. |
gallery_button_style |
1 |
1 o un slug de estilo de botón configurado |
Selecciona el estilo del botón de superposición. Disponible cuando gallery_overlay_elements es button. |
gallery_overlay_align |
web-image-box-center align-center |
web-image-box-top align-left, web-image-box-top align-center, web-image-box-top align-right, web-image-box-center align-left, web-image-box-center align-center, web-image-box-center align-right, web-image-box-bottom align-left, web-image-box-bottom align-center, web-image-box-bottom align-right |
Controla la alineación de los elementos de superposición. Disponible cuando gallery_overlay es hover o hide-on-hover o always. |
gallery_overlay_background |
1 |
Cadena, salvo que se indique lo contrario | Controla el color de fondo de la superposición. Disponible cuando gallery_overlay es hover o hide-on-hover o always. |
gallery_overlay_background_alpha |
50 |
Número | Establece un valor de opacidad personalizado. Disponible cuando gallery_overlay es hover o hide-on-hover o always. |
device_visibility |
— | Cadena, salvo que se indique lo contrario | Aplica la regla de visibilidad responsive seleccionada. |
el_id |
— | ID HTML válido y único | Introduce el ID de la sección (Nota: asegúrate de que sea único y válido según la especificación w3c). |
el_class |
— | Cadena, salvo que se indique lo contrario | Si quieres dar un estilo distinto a un elemento de contenido concreto, utiliza este campo para añadir un nombre de clase y luego haz referencia a él en tu archivo css. |
Personalizar la hoja de estilos
Los administradores pueden reemplazar la hoja de estilos completa del módulo Gallery en Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Gallery. Al guardar se publica una copia optimizada por sitio sin añadir la hoja de estilos a las páginas que no contienen el shortcode. Al revertir se devuelve el handle existente web-gallery al gallery.min.css actual proporcionado por el tema. Los atributos de la galería, el marcado generado, los scripts web_gallery y web_carousel, el límite diferido de PhotoSwipe, los assets de Flickity solo para carrusel, los assets de Isotope solo para masonry y los assets de Swiper a pantalla completa y pom-fullpage permanecen sin cambios.
Verificación
Los metadatos de la galería se resuelven desde la biblioteca de medios en el momento del renderizado. Las páginas almacenadas en caché deben actualizarse para mostrar los cambios de la biblioteca. La navegación por miniaturas está limitada a cada galería, incluso cuando varios shortcodes y galerías de Gutenberg comparten una página. Las imágenes a pantalla completa conservan su texto alternativo y sus orígenes de imagen responsive.
El shortcode conserva su contrato gallery_column_spacing con valores en píxeles. El bloque de galería de Gutenberg utiliza la escala de relleno en rem del tema y admite recuentos de columnas móviles explícitos tanto en masonry como en grid.
Comprueba web_gallery con los medios previstos, un tamaño responsive apropiado y cualquier texto alternativo o transcripción requerida. Presta especial atención a gallery_mode y gallery_random_mode.