Oxygen Builder Tutorial

Show an ACF Repeater Gallery inside Oxygen's Repeater

Get Help with Oxygen
Blue globe and ball image
Categories:
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.

Phe Simmonds

Tutorial written by Phe Simmonds

Director & Web Developer at WinuSoft Web Design. When she's not working, Phe can usually be found mountain biking with her partner, Luis and dog, Bubba.
Blue background image Blue ball image

Other Tutorials

Blue circular lines

Get In Touch

Whether your business is just getting started or you’re in the middle of a growth spurt, we can design and develop a website that will help you scale.

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.
Copyright © 2024 WinuSoft Web Design
crosschevron-downarrow-right