ACF Galerie mit Lightbox

Feldtyp = Galerie
Feldname = acf_galerie
Rückgabeformat = Bild-ID

PHP
<?php
// In functions.php deines Themes

function acf_galerie_shortcode() {
    // Aktuellen Post ermitteln
    $current_post_id = get_the_ID();
    
    // Prüfen ob wir im Post Type "galerie" sind
    if (get_post_type($current_post_id) !== 'galerie') {
        return '<p>Shortcode funktioniert nur auf Galerie-Seiten.</p>';
    }
    
    // ACF Gallery Feld vom aktuellen galerie-Post auslesen
    $image_ids = get_field('acf_galerie', $current_post_id);
    
    if (!$image_ids || !is_array($image_ids)) {
        return '<p>Keine Medien in der Galerie gefunden.</p>';
    }
    
    // fslightbox CSS/JS nur laden wenn Galerie vorhanden
    wp_enqueue_script('fslightbox', 'https://cdn.jsdelivr.net/npm/fslightbox@3.4.1/index.js', array(), '3.4.1', true);
    
    $output = '<div class="acf-galerie-wrapper">';
    $output .= '<ul class="acf-galerie">';
    
    foreach ($image_ids as $media_id) {
        $media_url = wp_get_attachment_url($media_id);
        $media_type = wp_check_filetype($media_url)['type'];
        $alt_text = get_post_meta($media_id, '_wp_attachment_image_alt', true);
        
        $output .= '<li class="acf-galerie-item">';
        
        // Unterscheidung: Bild oder Video?
        if (strpos($media_type, 'image') !== false) {
            // Für Bilder: <a> Tag mit Thumbnail als Inhalt
            $thumbnail = wp_get_attachment_image_src($media_id, 'medium');
            $output .= '<a data-fslightbox="gallery" href="' . $media_url . '" class="acf-galerie-link">
                           <img src="' . $thumbnail[0] . '" 
                                alt="' . esc_attr($alt_text) . '"
                                class="acf-galerie-image">
                       </a>';
        } else {
            // Für Videos: <a> Tag mit Video-Vorschau als Inhalt
            $output .= '<a data-fslightbox="gallery" href="' . $media_url . '" class="acf-galerie-link">
                           <div class="acf-galerie-video-thumbnail">
                               <div class="acf-galerie-play-button">▶</div>
                               <video class="acf-galerie-video-preview" muted>
                                   <source src="' . $media_url . '" type="' . $media_type . '">
                               </video>
                           </div>
                       </a>';
        }
        
        $output .= '</li>';
    }
    
    $output .= '</ul></div>';
    
    return $output;
}

// Shortcode registrieren
add_shortcode('acf-galerie', 'acf_galerie_shortcode');
SCSS
// ACF Galerie Styling
.acf-galerie-wrapper {
    width: 100%;
}

.acf-galerie {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.acf-galerie-link {
    display: block;
    cursor: pointer;
    text-decoration: none;
    aspect-ratio: 4/3; 
    overflow: hidden;
    border-radius: 8px;
}

.acf-galerie-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 8px;
    transition: transform 0.2s;
}

.acf-galerie-image:hover {
    transform: scale(1.02);
}

.acf-galerie-video-thumbnail {
    position: relative;
    background: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acf-galerie-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    z-index: 2;
}

.acf-galerie-video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

@media (max-width: 768px) {
    .acf-galerie {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 480px) {
    .acf-galerie {
        grid-template-columns: 1fr; 
    }
}

a.kt-lightbox {
    cursor: zoom-in !important;
}