Home Forums ACF PRO How to create a slide gallery block?


How to create a slide gallery block?

  • Hi to all,
    I need to create a slide gallery from a Gallery field.
    I have tried to use these two guides:
    The first shows how to create a testimonial block:
    The second shows how to display the slider from the gallery custom field:

    Then, in my child theme I created the blocks/acf-gallery folders, and inside it I uploaded the block.json and acf-gallery.php files.

    In functions.php I have added this code:

    function gnm_acf_gallery_block() {
         * We register our block's with WordPress's handy
         * register_block_type();
         * @link
        register_block_type( __DIR__ . '/blocks/acf-gallery' );
    // Here we call our tt3child_register_acf_block() function on init.
    add_action( 'init', 'gnm_acf_gallery_block' );

    The block.json code is:

        "name": "acf/gallery",
        "title": "ACF Gallery",
        "description": "A custom gallery block that uses ACF fields.",
        "category": "formatting",
        "icon": "admin-comments",
        "keywords": ["gallery", "quote"],
        "acf": {
            "mode": "preview",
            "renderTemplate": "acf-gallery.php"
        "supports": {
            "anchor": true

    In the acf-gallery.php I have added the following code:

    $images = get_field('galleria_casasi');
    if( $images ): ?>
        <div id="slider" class="flexslider">
            <ul class="slides">
                <?php foreach( $images as $image ): ?>
                        <img />" alt="<?php echo esc_attr($image['alt']); ?>" />
                        <p><?php echo esc_html($image['caption']); ?></p>
                <?php endforeach; ?>
        <div id="carousel" class="flexslider">
            <ul class="slides">
                <?php foreach( $images as $image ): ?>
                        <img />" alt="Thumbnail of <?php echo esc_url($image['alt']); ?>" />
                <?php endforeach; ?>
    <?php endif;>

    Into the <head> I have added the following script:

    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src=""></script>
    <script src="jquery.flexslider.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {

    Now, inside the blocks list I can find the Gallery Block, but it doesn’t works fine. It doesn’t display the slider gallery.

    What is wrong and what should I do to solve the issue?


  • I’m also interested in a similar question. 6 days have already passed, why has no one responded?

  • Hi,
    Well, I use Divi Builder and then I have bought this plugin and it works very fine!!!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.