Usar el bloque de galería

Con el bloque de Gutenberg Galería de inmuebles (immomakler/gallery) inserta exclusivamente la galería de imágenes de un inmueble, independientemente de la vista de detalle completa. El bloque ofrece las mismas opciones de diseño y presentación que la galería del Customizer, pero las define por instancia del bloque. De este modo, distintas páginas pueden mostrar galerías con diseños diferentes.

Requisitos

• WordPress con el editor de bloques Gutenberg (a partir de WordPress 5.0)
• WP-ImmoMakler (cualquier edición)

Insertar el bloque de galería

1. Editar un inmueble o crear una plantilla

   Abra un inmueble existente en el editor o cree una plantilla basada en bloques para el tipo de contenido Inmueble (requiere un tema de bloques o el editor del sitio).

2. Insertar el bloque

   Haga clic en el icono + y busque Galería de inmuebles, o navegue hasta la categoría Widgets. Inserte el bloque.

3. Elegir la fuente de imágenes

   Defina en el panel lateral Inmueble de qué inmueble proceden las imágenes (véase la sección siguiente).

4. Configurar la galería

   Ajuste el diseño, las opciones de slideshow o estáticas, las proporciones, los tamaños y el aspecto en los paneles laterales. La vista previa del editor se actualiza en directo.

5. Guardar y publicar

   Guarde o actualice la página. La galería ya está disponible en el frontend.

Elegir la fuente de imágenes

El panel Inmueble determina qué imágenes muestra el bloque.

Opción	Descripción
Fuente → Inmueble actual (Loop)	El bloque muestra las imágenes del inmueble en cuyo contexto se renderiza, por ejemplo en la plantilla del tipo de contenido Inmueble o dentro de un loop de consulta (predeterminado).
Fuente → Selección manual	Usted selecciona un inmueble concreto. Aparece un campo de selección en el que puede buscar por el título del inmueble o por el ID externo del inmueble (objektnr_extern).
Selección de imágenes	Limita qué imágenes se muestran: Todas las imágenes, Solo planos o Sin planos.

Nota

La Selección manual resulta adecuada para insertar la galería de un inmueble concreto en cualquier página (p. ej. una landing page). La búsqueda en el campo de selección utiliza tanto el título del inmueble como el ID externo del inmueble.

Tipo de galería y diseño

En el panel Tipo de galería y diseño elige entre dos formas básicas de presentación:

Tipo de galería	Descripción
Slideshow (Swiper)	Slideshow interactiva con barra de vista previa y opciones de carrusel y autoplay. Para más detalles sobre los diseños, véase Galería de imágenes: Slideshow.
Estática (Grid)	Cuadrícula estática compuesta por una imagen principal y miniaturas de vista previa, que se abre mediante una lightbox. Para más detalles sobre los diseños, véase Galería de imágenes: Imagen estática.

Según el tipo de galería elegido, aparecen las opciones de diseño correspondientes así como el panel Opciones de slideshow u Opciones estáticas.

Los paneles de ajustes

El bloque agrupa todas las opciones en los siguientes paneles laterales. El significado de cada opción es idéntico al de la galería del Customizer; las páginas enlazadas las describen en detalle.

Panel	Controla	Detalles
Inmueble	Fuente de imágenes y selección de imágenes	(véase arriba)
Tipo de galería y diseño	Slideshow frente a estática y el diseño	Slideshow · Estática
Opciones de slideshow	Autoplay, efecto y duración de la transición, botones de flecha, miniaturas en dispositivos móviles	Slideshow
Opciones estáticas	Modo de aspecto, comportamiento ante exceso de imágenes, animación al pasar el ratón, número de miniaturas	Estática
Cuadrícula (diseño estático)	Todas las imágenes como mosaicos de igual tamaño sin imagen principal: columnas (máximo), anchura mínima por mosaico, proporción de mosaico, ajuste de imagen (Recortar o Mostrar completa) y título de imagen como leyenda. Combinado con la selección de imágenes “solo planos de planta”, esto produce una caja de planos como la del skin de WP-ImmoMakler	Estática
Proporciones	Proporción de la imagen principal y de las miniaturas	Slideshow
Tamaños	Altura de la barra de vista previa, anchura de la columna de vista previa, altura del carrusel o altura fija de la galería	Slideshow
Espaciado y esquinas	Espacio entre miniaturas, espacio entre imágenes principales, redondeo de esquinas, color de los botones de flecha	Slideshow

Consejo

Los valores establecidos en el bloque se aplican únicamente a esa instancia de galería y sobrescriben los valores predeterminados globales del Customizer para ese bloque. Si deja una opción sin cambios, se aplica el valor predeterminado correspondiente.

Vista previa y prueba

El editor de Gutenberg muestra una vista previa en directo de la galería renderizada en el servidor, directamente en el editor. Para comprobar el resultado final:

1. Guarde o publique la página.
2. Abra la página en el frontend.
3. Compruebe la navegación de la slideshow o la lightbox y la presentación en dispositivos móviles.

Para desarrolladores

El bloque utiliza la misma biblioteca de galería que la página de detalle. El comportamiento puede personalizarse mediante hooks de filtro y variables CSS; véase Biblioteca de galería: Personalizar. Fuera del editor de bloques está disponible además el shortcode de galería.

También puede interesarle

• Galería de imágenes: Slideshow con miniaturas
• Galería de imágenes: Imagen estática
• Crear una single page
• Biblioteca de galería: Personalizar