Spielgruppe Teddy Bär ACF Galerien

ACF Galerie in Optionspage

PHP
<?php
/**
 * ACF Pro Gallery Shortcodes with Slider & Lightbox
 * Usage: [desktop_gallery] / [mobile_gallery]
 */

// ─── Assets ────────────────────────────────────────────────────────────────
add_action('wp_footer', function() {
    if (!wp_script_is('glightbox', 'enqueued') && !is_admin()) return;
    // loaded only when shortcode is used (see flag below)
});

function gw_gallery_assets() {
    static $loaded = false;
    if ($loaded) return;
    $loaded = true;

    // Glightbox
    wp_enqueue_style('glightbox', 'https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css');
    wp_enqueue_script('glightbox', 'https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js', [], null, true);

    // Tiny Slider
    wp_enqueue_style('tiny-slider', 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css');
    wp_enqueue_script('tiny-slider', 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js', [], null, true);
}

// ─── Render function ────────────────────────────────────────────────────────
function gw_render_gallery($field_name, $wrapper_class, $width, $height) {
    if (!function_exists('get_field')) return '<p>ACF not active.</p>';

    $ids = get_field($field_name, 'option');
    if (empty($ids)) return '';

    gw_gallery_assets();

    static $instance = 0;
    $instance++;
    $id = 'gw-slider-' . $instance;

    $slides = '';
    foreach ($ids as $img_id) {
        $full  = wp_get_attachment_image_url($img_id, 'full');
        $thumb = wp_get_attachment_image_url($img_id, 'large');
        $alt   = get_post_meta($img_id, '_wp_attachment_image_alt', true);
        $slides .= sprintf(
            '<div class="gw-slide"><a href="%s" class="glightbox" data-gallery="%s"><img src="%s" alt="%s" loading="lazy"></a></div>',
            esc_url($full), esc_attr($id), esc_url($thumb), esc_attr($alt)
        );
    }

    $style = sprintf(
        'style="width:%s;height:%spx;margin-inline:auto;"',
        $width === '100%' ? '100%' : $width . 'px',
        $height
    );

    $html = sprintf(
        '<div class="gw-gallery-wrap %s" %s>
            <div id="%s" class="gw-slider">%s</div>
            <button class="gw-prev" aria-label="Zurück">❮</button>
            <button class="gw-next" aria-label="Weiter">❯</button>
        </div>',
        esc_attr($wrapper_class), $style, esc_attr($id), $slides
    );
    
    $html .= sprintf(
        '<script>
        document.addEventListener("DOMContentLoaded", function() {
            var slider = tns({
                container: "#%s",
                items: 1,
                loop: true,
                controls: false,
                nav: false,
                autoplay: false,
            });
            document.querySelector("#%s").closest(".gw-gallery-wrap")
                .querySelector(".gw-prev").addEventListener("click", function(){ slider.goTo("prev"); });
            document.querySelector("#%s").closest(".gw-gallery-wrap")
                .querySelector(".gw-next").addEventListener("click", function(){ slider.goTo("next"); });
            GLightbox({ selector: "#%s .glightbox" });
        });
        </script>',
        $id, $id, $id, $id
    );

    return $html;
}

// ─── Shortcodes ─────────────────────────────────────────────────────────────
add_shortcode('desktop_gallery', function() {
    return gw_render_gallery('desktop-galerie', 'gw-desktop', 1000, 350);
});

add_shortcode('mobile_gallery', function() {
    return gw_render_gallery('mobile-galerie', 'gw-mobile', '100%', 220);
});