ACF Repeater within an ACF Gallery renders incorrectly

Question

I'm currently adding ACF fields into my Owl Carousel. While getting the images to display works. I'm having an issue where my code spits out all of the results from it's repeater into each slide, rather than one by one. Below is the code (everything is linked correctly to the Wordpress ACF fields) and I've attached an image of how the slider looks.

Any suggestions on how I can fix this?

<div class="owl-carousel" id="owl-single-example">
<?php foreach ($homepage_slideshow_gallery as $homepage_slideshow_gallery):?>
    <div class="slide" style="background-image: url('<?php echo $homepage_slideshow_gallery['url']; ?>')" />
        <div class="container caption">

        <?php if( have_rows('homepage_slideshow_repeater') ): ?>
          <?php while( have_rows('homepage_slideshow_repeater') ): the_row(); ?>
            <p><?php the_sub_field('homepage_slideshow_repeater_company'); ?></p>
            <h1 class="textblock"><span><?php the_sub_field('homepage_slideshow_repeater_title'); ?></h1>
            <a class="btn" href="<?php the_sub_field('homepage_slideshow_repeater_url'); ?>">View Work</a>
          <?php endwhile; ?>
        <?php endif; ?>

        </div>
    </div>
<?php endforeach;?>

What is the correct structure for Owl? You're putting everything in the repeater into the same container inside a slide... is that what it expects? — FluffyKitten
@FluffyKitten that's where I think I'm going wrong. How can I structure the code so the repeater will spit out a result for each slide? — Charlie McShane
That depends on Owl! Have you checked the Owl documentation & examples to see what it expects? Also, I don't understand the structure of your ACF fields - how do your repeater fields relate to the slider image? There's no clear association at the moment... or are they totally separate? — FluffyKitten
I have the structure of the Owl Carousel correct. But I'm relaying the repeater data incorrect. I have a $homepage_slideshow_gallery which is simply get_field('homepage_slideshow_gallery'); and the repeater $homepage_slideshow_repeater is get_field('homepage_slideshow_gallery');, so they are separate ACF fields! — Charlie McShane
Well then you should let us know what structure you are trying to create :) Why two separate fields? That's just complicating things, and making it even more difficult to match the image and caption. Could you not add the image into the repeater, then you've only one loop to manage? — FluffyKitten

FluffyKitten FluffyKitten · Accepted Answer · 2017-10-23T10:17:28

There is no direct relationship between your images and captions because they are in separate ACF fields, so you have made it more difficult on yourself to get your loops right to create that association correctly.

My suggestion would be to add an image field directly into your homepage_slideshow_repeater repeater field instead of using the separate gallery field.

1: Edit your field group that has the repeater, and add another subfield to it for the image, with the following settings:

Field type: Content: Image
Return Value: Image URL

By returning just the image URL, we can use it directly for the background image url.

2: Next edit your homepage and add the corresponding slider image to your repeater directly along side its the caption, title etc

3: Now in your code, you'll only need to loop once because all the relevant information is in the same repeater row. You would use something like this (using the field name "slide_image" for the image):

<?php if( have_rows('homepage_slideshow_repeater') ): ?>
   <div class="owl-carousel" id="owl-single-example">
    <?php while( have_rows('homepage_slideshow_repeater') ): the_row(); ?>

       /* get the image from the repeater - the content will be just the url so we can use it directly */
       <div class="slide" style="background-image: url('<?php the_sub_field('slide_image'); ?>')" />

           /* now add the caption etc for this image to the slide */
           <div class="container caption">
             <p><?php the_sub_field('homepage_slideshow_repeater_company'); ?></p>
             <h1 class="textblock"><span><?php the_sub_field('homepage_slideshow_repeater_title'); ?></h1>
             <a class="btn" href="<?php the_sub_field('homepage_slideshow_repeater_url'); ?>">View Work</a>    
          </div>
       </div>

    <?php endwhile; ?>
  </div>
<?php endif; ?>

Note that this is just off the top of my head & is untested, but it should give you an idea of whats required.

ACF Repeater within an ACF Gallery renders incorrectly

1 Answers