Creating a carousel with dynamic images from a custom field

Hi there.

Just to understand correctly. You have a custom post type of venues or similar and you want to be able to upload photos for each venue and show those images via a carousel, correct? Are you using ACF for your custom fields?

Hi there.

It’s a bit tricky this one! Let’s try this. Create a static image carousel. Set it up as you would like to appear. Upload some static images to test. We are going to need some code to hack into the carousel items and populate them with our gallery images:

add_filter( 'render_block_generateblocks-pro/carousel-items', 'inject_gallery_styled', 10, 2 );
function inject_gallery_styled( $block_content, $block ) {
    // Only run on fado_house post type
    if ( get_post_type() !== 'fado_house' ) {
        return $block_content;
    }
    
    // Get comma-separated attachment IDs from custom meta box
    $gallery_ids = get_post_meta( get_the_ID(), '_fado_house_gallery', true );
    
    if ( empty( $gallery_ids ) ) {
        return $block_content;
    }
    
    // Convert comma-separated string to array
    $image_ids = explode( ',', $gallery_ids );
    $image_ids = array_map( 'trim', $image_ids );
    
    // Build carousel items HTML
    $items_html = '';
    $count = 1;
    $total = count( $image_ids );
    
    foreach ( $image_ids as $image_id ) {
        $image_id = intval( $image_id );
        
        if ( empty( $image_id ) ) {
            continue;
        }
        
        $image_url = wp_get_attachment_image_url( $image_id, 'large' );
        $image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
        
        if ( ! $image_url ) {
            continue;
        }
        
        $item_class = 'gb-carousel-item';
        if ( $count === 1 ) {
            $item_class .= ' is-active';
        } elseif ( $count === 2 ) {
            $item_class .= ' is-next';
        }
        
        $items_html .= '<div class="' . $item_class . '" aria-roledescription="slide" role="group" aria-label="' . $count . ' of ' . $total . '">';
        $items_html .= '<img decoding="async" src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $image_alt ) . '" style="width:100%;height:500px;object-fit:cover;" />';
        $items_html .= '</div>' . "\n";
        
        $count++;
    }
    
    if ( empty( $items_html ) ) {
        return $block_content;
    }
    
    // Replace content between opening and closing tags
    $opening_tag_end = strpos( $block_content, '>' );
    $closing_tag_start = strrpos( $block_content, '</div>' );
    
    if ( $opening_tag_end === false || $closing_tag_start === false ) {
        return $block_content;
    }
    
    $new_content = substr( $block_content, 0, $opening_tag_end + 1 ) 
                 . "\n" . $items_html 
                 . substr( $block_content, $closing_tag_start );
    
    return $new_content;
}

This should populate gallery images from each fado_house post and will only affect galleries appearing in this particular CPT. If you want to affect the styling of the gallery images, this part of the code affects them:

style="width:100%;height:500px;object-fit:cover;"

Hope it works the first time, let me know!

Oh nice! Ok, no problem at all.

Hi @opus,

The Carousel block was introduced in GB Pro 2.5. If you don’t see it available, your site is likely still using V1 blocks, as the Carousel block is only available in V2.

To switch to V2, you can follow this guide:
https://learn.generatepress.com/blocks/block-guide/generateblocks-1-x-to-2-0/#ver2

That means you’re already using V2 blocks. In the editor, do you see this list of blocks?

No problem!