Biblioteca de galería: Personalizar

La biblioteca de galería compartida (\ImmoMakler\Frontend\Gallery\) puede personalizarse en dos puntos sin modificar el código del plugin:

1. Hooks de filtro — modifican la selección de imágenes, el array de opciones o la configuración de lightbox en tiempo de ejecución.
2. Variables CSS — sobreescriben colores, espaciados y tamaños de controles por instancia de galería.

Hooks de filtro

immomakler_gallery_image_collection

Modifica la colección de imágenes resuelta antes del renderizado. Actúa de forma uniforme en todos los puntos de uso: módulo de Divi, etiqueta de Bricks, shortcode y los templates heredados del skin.

Firma:

apply_filters(
    'immomakler_gallery_image_collection',
    \ImmoMakler\Frontend\Gallery\Image_Collection $collection,
    int $post_id,
    string $source // 'all' | 'floorplans' | 'non_floorplans'
)

Ejemplo — invertir el orden de las imágenes:

add_filter(
    'immomakler_gallery_image_collection',
    function ( $collection, $post_id, $source ) {
        if ( ! $collection instanceof \ImmoMakler\Frontend\Gallery\Image_Collection ) {
            return $collection;
        }
        $reversed = array_reverse( $collection->all() );
        return new \ImmoMakler\Frontend\Gallery\Image_Collection( $reversed );
    },
    10,
    3
);

immomakler_gallery_options

Modifica el array de opciones que se pasa al preset después de que los valores del llamador se hayan fusionado con los valores predeterminados del preset. Adecuado para imponer opciones como loop, autoplay o space_between de forma centralizada.

Firma:

apply_filters(
    'immomakler_gallery_options',
    array $options,
    string $preset_id,
    int $post_id,
    string $source
)

Ejemplo — activar autoplay para todos los presets de carrusel:

add_filter(
    'immomakler_gallery_options',
    function ( $options, $preset_id, $post_id, $source ) {
        if ( in_array( $preset_id, [ 'horizontal_thumbs', 'vertical_thumbs' ], true ) ) {
            $options['autoplay'] = true;
        }
        return $options;
    },
    10,
    4
);

Ejemplo — desactivar la navegación con las teclas de flecha:

De forma predeterminada, los presets de slideshow pueden manejarse con las teclas de flecha (así como con Re Pág / Av Pág) en cuanto la galería se encuentra en el área visible. Si el lightbox está abierto, las teclas de flecha controlan únicamente el lightbox. La opción keyboard desactiva la navegación con el teclado:

add_filter(
    'immomakler_gallery_options',
    function ( $options, $preset_id, $post_id, $source ) {
        $options['keyboard'] = false;
        return $options;
    },
    10,
    4
);

immomakler_lightgallery_options

Modifica las opciones que se pasan a lightGallery() en el navegador — p. ej., plugins, speed, licenseKey, strings. Actúa tanto en la nueva biblioteca de galería como en los templates heredados del skin (es el mismo filtro que la antigua clase Lightgallery ha ofrecido durante años).

Firma:

apply_filters( 'immomakler_lightgallery_options', array $options )

Ejemplo — activar el botón de descarga:

add_filter(
    'immomakler_lightgallery_options',
    function ( $options ) {
        $options['download'] = true;
        return $options;
    }
);

Activar plugins de lightGallery

La clave plugins contiene la lista de plugins activos de lightGallery. WP-ImmoMakler incluye un script listo para usar para todos los plugins de lightGallery. No es necesario incluir el script correspondiente usted mismo mediante wp_enqueue_script() — basta con añadir el token adecuado en plugins:

Token	Plugin	Activo por defecto
lgZoom	Zoom	✓
lgThumbnail	Miniaturas (Thumbnails)	✓
lgFullscreen	Pantalla completa	✓
lgAutoplay	Reproducción automática (Slideshow)	—
lgMediumZoom	Medium Zoom	—
lgRotate	Girar / Voltear	—
lgShare	Compartir (redes sociales)	—
lgHash	Deep-linking por hash de URL	—
lgPager	Puntos de página (Pager)	—
lgComment	Comentarios	—
lgRelativeCaption	Pie de foto relativo	—
lgVideo	Vídeo (YouTube, Vimeo, HTML5)	—
lgVimeoThumbnail	Miniaturas de Vimeo (requiere lgVideo)	—

WP-ImmoMakler carga automáticamente exactamente los archivos JavaScript correspondientes a los tokens que realmente se hayan incluido en plugins: al añadir un token se carga el script del plugin correspondiente; al eliminarlo, el script no se incluye.

Nota

Los tokens anteriores son los plugins para los que WP-ImmoMakler incluye un script. Puede encontrar una descripción de cada plugin y sus opciones en la documentación de lightGallery. Puede seguir utilizando plugins de lightGallery personalizados adicionales — registre y cargue su script usted mismo y añada el token en plugins.

Ejemplo — activar la reproducción automática (Slideshow):

add_filter(
    'immomakler_lightgallery_options',
    function ( $options ) {
        $options['plugins'][]         = 'lgAutoplay'; // Activar el plugin de autoplay
        $options['slideShowAutoplay'] = true;         // Iniciar la presentación automáticamente al abrir
        $options['slideShowInterval'] = 1500;         // Tiempo entre imágenes (en ms)
        $options['progressBar']       = true;         // Mostrar barra de progreso
        return $options;
    }
);

Con solo añadir lgAutoplay aparece el botón de inicio/pausa en la barra de herramientas de la lightbox; slideShowAutoplay también inicia la reproducción automáticamente al abrir. La lista completa de opciones de autoplay (slideShowAutoplay, slideShowInterval, progressBar, forceSlideShowAutoplay, autoplayControls) puede encontrarse en la documentación de lightGallery.

Filtro: ampliar el área de controles de la galería estática

La galería estática muestra en la parte inferior derecha un área de controles (.immomakler-gallery__controls) en la que aparece por defecto el botón de píldora “Ver todas las N fotos” (cuando no todas las fotos caben en la cuadrícula de miniaturas y la opción del Customizer Si hay más fotos que espacios para miniaturas está configurada en “Botón”).

Mediante el filtro immomakler_gallery_static_controls_items se pueden añadir acciones adicionales — típicamente son enlaces de anclaje a secciones de plano de planta, vídeo o visita virtual de la página de detalle.

Firma:

apply_filters(
    'immomakler_gallery_static_controls_items',
    array $items,
    \ImmoMakler\Frontend\Gallery\Image_Collection $images,
    int $post_id
)

Cada elemento es un array asociativo con los siguientes campos:

Campo	Obligatorio	Descripción
modifier	✓	Sufijo modificador BEM para la clase CSS (p. ej., floorplan → .immomakler-gallery__controls-item--floorplan).
href	✓	Destino del enlace: # para un disparador de lightbox, #id-de-seccion para enlaces internos.
label	✓	Texto visible y traducido.
data_attributes	opcional	Pares nombre-atributo => valor, renderizados como data-<nombre>="<valor>". Use immomakler-gallery-lightbox-index para conectar un disparador de lightbox.
aria_label	opcional	Texto para lectores de pantalla (reemplaza el label visible).
icon_svg	opcional	Marcado SVG sin procesar. Se muestra en un span __controls-item-icon antes del label.

Ejemplo — añadir un enlace “Ver plano de planta” cuando existe un anclaje de plano en la página:

add_filter(
    'immomakler_gallery_static_controls_items',
    function ( array $items, $images, int $post_id ): array {
        if ( ! has_floorplan( $post_id ) ) {
            return $items;
        }
        $items[] = [
            'modifier' => 'floorplan',
            'href'     => '#grundriss',
            'label'    => __( 'Grundriss anzeigen', 'mein-theme' ),
            'icon_svg' => '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="..."/></svg>',
        ];
        return $items;
    },
    10,
    3
);

Nota

El campo icon_svg se emite sin escapar — está pensado como interfaz para desarrolladores, no para entradas de clientes. Proporcione aquí únicamente marcado SVG estático y de confianza.

Módulos de Swiper incluidos

Los presets de slideshow funcionan con Swiper. WP-ImmoMakler no incluye Swiper completo, sino solo el núcleo con estos módulos:

Módulo	Para qué
Navigation	Botones de flecha
Pagination	Contador de imágenes (p. ej., “3 / 20”)
A11y	Etiquetas para lectores de pantalla
Thumbs	Tira de miniaturas
Autoplay	Cambio automático de imágenes
EffectFade	Efecto de transición “Desvanecer”
Keyboard	Navegación con las teclas de flecha
Manipulation	Añadir imágenes en tiempo de ejecución

Los presets propios que registre mediante la action immomakler_gallery_register_presets solo pueden usar estos módulos. Las opciones de Swiper de otros módulos, como effect: 'coverflow' o mousewheel, no tienen efecto.

La copia de Swiper de WP-ImmoMakler está disponible en window.immomakler.Swiper y no ocupa la variable global window.Swiper. Así, otros plugins con su propio Swiper, como Elementor Pro, y WP-ImmoMakler no entran en conflicto entre sí.

Variables CSS

Los presets integrados utilizan propiedades personalizadas CSS en la clase contenedora .immomakler-gallery. Esto le permite sobreescribir colores, espaciados y tamaños de controles por instancia de galería o de forma global — sin necesidad de escribir selectores con alta especificidad.

Variable	Valor predeterminado	Descripción
--immomakler-gallery-primary-color	#af1615	Color de acento (flechas, miniatura activa, controles de lightbox).
--immomakler-gallery-primary-color-inverted	#fff	Color de contraste respecto al color de acento (p. ej., icono de flecha sobre botón de color).
--immomakler-gallery-main-aspect	4 / 3	Proporción de aspecto de la imagen principal.
--immomakler-gallery-thumb-aspect	3 / 2 (vertical) / 4 / 3 (horizontal)	Proporción de aspecto de las miniaturas.
--immomakler-gallery-gap	8px (horizontal) / 10px (vertical)	Espacio entre imágenes. Afecta tanto al gap del grid CSS de la tira de miniaturas como al spaceBetween de Swiper — el loader lee la variable calculada al inicializar, de modo que los overrides CSS propios (p. ej., media queries responsivas) mantengan el espacio entre miniaturas de forma consistente.
--immomakler-gallery-thumbs-width	200px (vertical)	Ancho de la tira de miniaturas en el diseño vertical.
--immomakler-gallery-nav-button-size	30px	Tamaño de los botones de flecha.
--immomakler-gallery-nav-opacity	0.8	Opacidad de las flechas de la imagen principal (en reposo).
--immomakler-gallery-thumb-default-opacity	0.6	Opacidad de las miniaturas inactivas.
--immomakler-gallery-thumb-nav-opacity	0.5	Opacidad de las flechas de la tira de miniaturas (diseño vertical).
--immomakler-gallery-thumb-nav-height	20px	Altura de los botones de flecha de la tira de miniaturas (diseño vertical).
--immomakler-gallery-carousel-height	400px	Altura de la galería en el diseño de carrusel.
--immomakler-gallery-image-position	center	object-position de todas las imágenes recortadas (imágenes principales, miniaturas, mosaicos). El ajuste Encuadre al recortar la establece mediante las clases immomakler-gallery--image-position-top (center top) e immomakler-gallery--image-position-bottom (center bottom). También son posibles valores propios como center 70%.
--immomakler-gallery-slide-background	#fff	Fondo detrás de las imágenes con los efectos de transición “Desvanecer” y “Aus- und Einblenden”. Solo es visible detrás de imágenes con zonas transparentes, como planos guardados en PNG. En sitios oscuros, establézcalo, por ejemplo, en el color de fondo de la página.

Ejemplo — establecer el color de acento y la proporción de la imagen principal de forma global:

.immomakler-gallery {
    --immomakler-gallery-primary-color: #1a73e8;
    --immomakler-gallery-primary-color-inverted: #ffffff;
    --immomakler-gallery-main-aspect: 16 / 9;
}

Consejo

Las opciones del Customizer bajo WP-ImmoMakler → Galería de imágenes establecen estas variables automáticamente a través de wp_add_inline_style. Las reglas CSS propias en .immomakler-gallery sobreescriben los valores del Customizer. Las personalizaciones por instancia — por ejemplo, si desea dar un estilo diferente a dos galerías en una misma página — funcionan mediante clases de contenedor de su template.

También puede interesarle

• Shortcode de galería
• Galería de imágenes: Slideshow
• Galería de imágenes: Imagen estática
• Procesamiento de imágenes de inmuebles: Ajuste individual de tamaños de imagen
• Implementar personalizaciones de forma segura ante actualizaciones