Galería de imágenes: Slideshow con miniaturas

Desde la versión 5.60, WP-ImmoMakler ofrece una biblioteca de galería compartida basada en Swiper y Lightgallery. Sustituye al anterior slideshow de galleria.io y ofrece cuatro variantes de diseño, un concepto de interacción unificado en dispositivos móviles y opciones de personalización consistentes a través del Customizer.

Activar el tipo de galería

En el backend de su sitio web (wp-admin), navegue a WP-ImmoMakler → Customizer → Galería de imágenes → Presentación de imágenes del inmueble y seleccione Slideshow con miniaturas.

Las siguientes opciones aparecen a continuación en la sección Galería de imágenes.

Selección de imágenes

Determina qué imágenes del inmueble aparecen en la galería. Los planos se reconocen automáticamente como tales durante la importación (p. ej. mediante OpenImmo) y pueden tratarse de forma independiente aquí.

Valor	Descripción
Todas las imágenes (predeterminado)	Las fotos y los planos se muestran conjuntamente.
Solo planos	Solo se muestran las imágenes de planos.
Sin planos	Solo se muestran las fotos; los planos permanecen ocultos.

Esta opción se aplica tanto al slideshow como a la galería estática. Se corresponde con la selección de imágenes disponible en las integraciones de bloques/theme builders (Gutenberg, Elementor, Divi, WPBakery, Bricks) — de modo que puede mostrar, por ejemplo, las fotos en un lugar y solo los planos del inmueble en otro. En el skin de WP-ImmoMakler, los planos también pueden aparecer sin recortar en una caja propia justo debajo de la caja de contacto – véase Planos en su propia caja.

Determina si un clic en una foto de la galería abre el lightbox sobre la página. Activada de forma predeterminada.

Si la opción está desactivada, las imágenes de la galería dejan de ser clicables: no se abre ningún lightbox, el cursor ya no muestra la lupa, y el script del lightbox ni siquiera llega a cargarse.

Esta opción actúa tanto para el slideshow como para la galería estática.

Clic en una foto en los page builders

En los elementos de galería de los page builders (editor de bloques, Elementor, Divi, WPBakery, Bricks, Enfold), el ajuste se llama Clic en una foto y ofrece una tercera posibilidad por galería:

Abrir vista ampliada — el valor predeterminado, corresponde al lightbox activado.
Ver inmueble — un clic en una foto lleva a la página de detalle del inmueble. Pensado para una galería que coloque en una lista de inmuebles, por ejemplo en el Loop Grid de Elementor, en un bucle de consulta de Bricks, en un Query Loop del editor de bloques o en una página de plantilla para la vista de lista. Así, la galería se vuelve clicable como las imágenes en la vista de lista de WP-ImmoMakler. Las flechas y la tira de miniaturas quedan reservadas para la navegación de imágenes — solo un clic en la imagen principal cambia al inmueble. En los inmuebles de referencia, las fotos permanecen sin enlazar mientras el ajuste Enlazar vista detallada para inmuebles de referencia esté desactivado.
Nada — las fotos no son clicables.

Como un clic solo puede desencadenar una acción, se trata de una única selección y no de un conjunto de interruptores individuales.

Diseño

La opción Diseño determina la disposición básica de la galería. El nombre describe la forma de la galería en conjunto, no la posición de la tira de miniaturas:

Diseño	Descripción
Vertical	Imagen principal arriba, tira de miniaturas debajo (predeterminado). La galería es alta/apilada en conjunto — resulta natural en columnas estrechas y bajo el encabezado.
Horizontal	Imagen principal a la izquierda, tira de miniaturas a la derecha. La galería es ancha en conjunto — adecuada para áreas hero y plantillas de escritorio a ancho completo.
Sin miniaturas	Solo la imagen principal con navegación por flechas. Adecuado cuando la galería se coloca bajo una columna estrecha o en un listado.
Carrusel	Imagen principal a ancho completo con imágenes anterior y siguiente recortadas (efecto peek). Utiliza una altura fija en lugar de una proporción de aspecto.

Botones de flecha en la tira de miniaturas

Activa botones de flecha adicionales para desplazarse por la tira de miniaturas: arriba/abajo para el diseño horizontal, izquierda/derecha para el diseño vertical. Práctico cuando la tira de miniaturas contiene más imágenes de las que son visibles al mismo tiempo.

Avance automático de imágenes (Autoplay)

Cuando está activado, las imágenes avanzan automáticamente al intervalo configurado. Al hacer clic o deslizar, el autoplay se pausa.

Velocidad de autoplay (segundos): Intervalo entre cambios de imagen. Predeterminado 4 segundos, rango 1–30.

Efecto de transición

Determina cómo se anima la imagen principal al cambiar.

Valor	Descripción
Deslizar	La imagen principal se desplaza horizontalmente hacia la siguiente imagen (predeterminado). Efecto slider clásico.
Desvanecer	La imagen principal se desvanece suavemente en la siguiente (cross-fade). Resulta más tranquilo y adecuado para galerías en las que la atención debe centrarse en las propias imágenes y no en la mecánica del slider.

Duración de la transición (milisegundos)

Con qué rapidez se produce la transición entre imágenes. Valor predeterminado: 400 ms, rango 100–2000 ms.

Valores menores (100–200 ms) resultan muy directos — adecuados para slideshows rápidos y enérgicos.
Valores mayores (≥ 800 ms) resultan más suaves y tranquilos — adecuados en combinación con autoplay y/o el efecto de desvanecimiento.

Este ajuste se aplica tanto al cambio de imagen como al desplazamiento de la tira de miniaturas al hacer clic en una miniatura — ambos se animan al mismo ritmo, de modo que no se produce ningún efecto de “salto + arrastre”.

Proporción de aspecto de imagen principal / Proporción de aspecto de miniaturas

Controlan la proporción de aspecto de las áreas de imagen respectivas.

Valor	Descripción
16:9	Formato panorámico — estándar para slideshows e imágenes hero.
3:2	Formato fotográfico clásico.
4:3	Formato estándar.
1:1	Cuadrado.
Sección áurea (1,618:1)	Proporción naturalmente equilibrada y estéticamente agradable.
Original	Utiliza la proporción de aspecto natural de cada foto. Las imágenes no se recortan — las fotos con diferentes proporciones conservan su forma individual.

En el diseño de carrusel, la proporción de aspecto de la imagen principal actúa como el ancho de cada imagen a altura fija — con “Original”, las diferentes fotos tendrán diferentes anchos.

Altura de la tira de miniaturas (px)

Se muestra cuando se selecciona el diseño vertical (miniaturas debajo de la imagen principal). Predeterminado: 110 px.

Determina la altura de la tira de miniaturas horizontal. El ancho de cada miniatura individual se calcula automáticamente a partir de altura × proporción de aspecto; el número de miniaturas visibles simultáneamente se calcula a partir del ancho de la galería dividido por el ancho de la miniatura.

Ancho de la tira de miniaturas (px)

Se muestra cuando se selecciona el diseño horizontal (miniaturas a la derecha de la imagen principal). Predeterminado: 200 px.

Determina el ancho de la tira de miniaturas vertical. La altura de cada miniatura individual se calcula automáticamente a partir de ancho ÷ proporción de aspecto; el número de miniaturas visibles simultáneamente se calcula a partir de la altura de la galería dividida por la altura de la miniatura.

Mostrar miniaturas en dispositivos móviles

De forma predeterminada, las miniaturas se ocultan en pantallas estrechas (≤ 768 px) — suelen ser demasiado pequeñas para ser útiles. Active esta opción para mostrar las miniaturas también en dispositivos móviles.

Altura del carrusel / Unidad de altura

Ambas opciones solo se aplican en el diseño de carrusel.

Altura del carrusel establece el valor de altura numérico (predeterminado: 400).
Unidad de altura determina cómo se interpreta el valor:

Unidad	Descripción
`px`	Altura fija en píxeles (predeterminado).
`vw`	Porcentaje del ancho del viewport. Se escala con el ancho del navegador.
`vh`	Porcentaje de la altura del viewport. Se escala con la altura del navegador.
`svh`	Altura de viewport pequeño (móvil): incluye la barra de direcciones en el cálculo.
`lvh`	Altura de viewport grande (móvil): sin barra de direcciones.
`dvh`	Altura de viewport dinámica (móvil): alterna entre `svh` y `lvh` según si la barra de direcciones es visible.

Separación entre imágenes (px)

Determina la separación entre la imagen principal y la tira de miniaturas, así como entre las miniaturas individuales. Valor predeterminado: 6 px.

Redondeo de esquinas

Las opciones Redondeo de esquinas (px) y Aplicar redondeo a se aplican igualmente a las galerías Swiper y estáticas.

Redondeo de esquinas (px): 0 (esquinas rectas, predeterminado) a 30 px.
Aplicar redondeo a:
- Cada imagen individualmente: Las imágenes principal y las miniaturas reciben cada una esquinas redondeadas.
- Solo las esquinas exteriores de la galería: Solo las cuatro esquinas exteriores de toda la galería están redondeadas; las imágenes individuales conservan esquinas rectas.

Resolución de imagen y srcset

La galería Swiper utiliza wp_get_attachment_image() y por tanto proporciona automáticamente un srcset completo con todos los tamaños de imagen registrados. El navegador selecciona la variante adecuada según la posición de visualización y la densidad de píxeles del dispositivo (p. ej. 2× en pantallas Retina). Por este motivo, no existe una entrada de “dimensiones en píxeles” en el Customizer para la galería Swiper — la selección manual de un tamaño no tendría efecto sobre el archivo que el navegador carga realmente.

El factor determinante para la calidad de imagen es la resolución original de las fotos subidas. Si estas son suficientemente altas, WordPress sirve automáticamente el tamaño adecuado para cada clase de dispositivo.

Para desarrolladores

El comportamiento se puede personalizar aún más mediante hooks de filtro y variables CSS — véase Biblioteca de galería: Personalizar.

La galería también puede utilizarse fuera de la página de detalle a través del Shortcode de galería.