Show an ACF Repeater Gallery inside Oxygen’s Repeater

It’s not currently possible to show an ACF Gallery inside Oxygen’s Repeater if the Repeater data source is an ACF Repeater. However, there is a workaround using a Code Block element and Slick carousel.

First, download the slickGallery ZIP file, extract the “gallery” directory and place it in your site root.

Next, add a Code Block element ABOVE your Repeater. You will need to add CSS, JS and PHP to the associated Code Block tabs.

/*
* Add this to the CSS tab of the Code Block ABOVE the Repeater:
*/

.thumbnail img {
   box-sizing: border-box;
   border: 1px solid #ddd;
   padding: 2px;
   margin: 0 1% 15px 0;
   width: 32.6667%;
   display: inline-block;
}
	
.thumbnail img:nth-of-type(3n+3) {
   margin-right: 0;
}

// Add this to the JavaScript tab of the Code Block ABOVE the Repeater:

jQuery(document).ready(function(){ 
  jQuery('.gallery').slickLightbox({ 
      itemSelector: '> a' 
   }); 
});

// Add this to the PHP & HTML tab of a Code Block ABOVE the Repeater:

<?php
  session_start();
  $_SESSION['row_index'] = 0;
?>

Then, add a Code Block element inside your Repeater. You need to place it wherever you want your ACF Gallery to show. Add the following code to the PHP & HTML tab of the Code Block and adjust the ACF field names on line #6 and #10 as needed.

// Add this to the PHP & HTML tab of a Code Block INSIDE the Repeater. Adjust the field names as needed.

<?php

  // This is your Repeater field name
  $rows = get_field('elements-repeater' );
  $specific_row = $rows[$_SESSION['row_index']];

  // This is the Gallery field name
  $gallery_images = $specific_row['gallery_of_photos'];

if($gallery_images): ?> 

   <div class="gallery"> 

      <?php foreach( $gallery_images as $image ): ?> 

         <a href="<?php echo $image['url']; ?>" target="_blank" class="thumbnail"> 
            <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php the_title(); ?>" /> 
         </a> 

      <?php endforeach; ?> 

   </div> 

<?php endif; ?>


<?php    

  $_SESSION['row_index'] ++;

?>

Finally, install the Code Snippets plugin and create a snippet with the following code to enqueue the Slick files added to the site root in the first step:

Add this to the Code Snippets plugin: https://en-gb.wordpress.org/plugins/code-snippets/

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_slick_files' );
/**
 * Loads <list assets here>.
 */
function enqueue_slick_files() {

    // Enqueue CSS
    wp_enqueue_style( 'slick-css', '/gallery/slick.css' );
    wp_enqueue_style( 'slick-theme', '/gallery/slick-theme.css' );
    wp_enqueue_style( 'slick-lightbox', '/gallery/slick-lightbox.css' );

    // Enqueue JS
    wp_enqueue_script( 'slick-js', '/gallery/slick.min.js', '', '', true );
    wp_enqueue_script( 'slick-lightbox-js', '/gallery/slick-lightbox.js', '', '', true );

}

?>

That should be everything you need to get your ACF Gallery working in the Repeater.