How to Add a Gallery in an ACF Repeater - Oxygen Builder

Out of the box, the Oxygen Gallery element cannot show images from a gallery field in an Advanced Custom Fields repeater. You need to use a code block in your loop (or in your Oxygen Builder Repeater element if you're using that).

You'll also need a lightbox solution. Again, either a custom code solution or some 3rd party Oxygen addons let you define a custom gallery/lightbox source.

The custom code for use in your ACF Repeater to view your gallery images you can find below. Make sure to change 'gallery' to your gallery field name.

<?php 

$images = get_sub_field('gallery');

if( $images ): ?>
    <ul class="thumb-gallery">
        <?php foreach( $images as $image ): ?>
            <li class="thumb-gallery-li">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" data-large="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
                <p><?php echo $image['caption']; ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

 

Signup For Emails

Want to be notified when new tutorials are released? Signup below for our roundup emails. We promise not to spam and won't blow up your inbox. 
  • This field is for validation purposes and should be left unchanged.
Jonathan Jernigan, Founder
Permaslug and APEX Web Solutions

Join Permaslug

Membership Benefits Include:

  • Ultimate Oxygen Course
  • Ultimate Woocommerce Course
  • ACF Pro Course
  • Material Design Lite
  • Template Downloads
  • Community
  • And more!
register

More Posts

Four New Composite Elements Added to Oxygen

Today the Oxygen Builder team has released 4 new composite elements into the wild that include a breadcrumbs element, a video playlist element, a logo slider element, and last but not least an image accordion…
READ post

The Saga of Menus in Oxygen and How I Fixed It

By far the weakest link of Oxygen Builder has been their Menu elements. I've spent countless hours across numerous client projects trying to find the best solution and I think I've found one that will…
READ post

Automatically Convert Figma to Oxygen Builder with Xenon

I am extremely excited to annouce my agency's app called Xenon. This tool lets you export your Figma designs into Oxygen Builder automatically. What I'll show you is a demo of how the app connects…
READ post
menu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram