CODEWITHSUNDEEP
phphtmlwordpresswordpress-themingadvanced-custom-fields
Charlie McShane
Charlie McShane

Reputation: 317

ACF Repeater within an ACF Gallery renders incorrectly

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;?>

The error where all results from the repeater (Company name, title and URL) all get spit out into each slide, rather than one by one.

Upvotes: 0

Views: 930

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

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.

Upvotes: 1

Related Questions