WordPress advanced custom fields, loop though repeater

Question

What I have

I have a repeater setup in Advanced custom fields and bootstrap slider in my code.

What I trying to achieve

I would like to add a image and text in my WordPress repeater and have it populate my slider. so that each new repeater row has its own image and text.

I have the image working, but not the text so at the moment every slide has its own image, but for some reason I have all the text displaying for each slide.

bellow is the layout of my ACF repeater

bellow is my current slider

so I have 3 images that show on the correct slides but as you can see my content is showing all not just the content related for the slide

My code

<?php
$sliderImages = get_field('section_8_slider');
$count = 0;
$section = "section_8_";
$order = array();
?>
 <div class="col-lg-8 mb-3">
                <div class="carousel-inner">
                    <?php foreach ($sliderImages as $imgNumber => $image): ?>
                        <div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
                            <img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">

                            <?php if (have_rows($section . 'slider')):
                                while (have_rows($section . 'slider')):
                                    the_row(); ?>
                                    <?php

                                    foreach ($sliderImages as $i => $row)
                                    if ($sliderImages ): ?>
                                            <div class="carousel-text-block">
                                                <h4 class="mb-1"> <?php echo $row['content_title']; ?></h4>
                                                <p class="small m-0"> <?php echo $row['content']; ?></p>
                                            </div>
                                    <?php endif; ?>
                                <?php endwhile;
                            endif; ?>

                        </div>
                    <?php endforeach ?>
                </div>
                <a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only"></span>
                </a>
                <a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only"></span>
                </a>
            </div>

When you say "the first right text", do you mean that you want to show the content field, or if there is no content you want to show the content title otherwise the text under the title, and so on? — hostingutilities.com
so for each image i add in the repeater I also have text associated with it, I want to show the associated text — Beep
Can you upload the html-php code that creates the repeater? @Beep — G. Siganos

G. Siganos G. Siganos · Accepted Answer · 2019-09-24T10:10:26

You are looping each field 2 times. You could use get_sub_field() in order to simplify your code, try something like this:

<div class="carousel-inner">
<?php if (have_rows('section_8_slider')):
    while (have_rows('section_8_slider')): the_row();
        $image = get_sub_field('image');
        $content_title = get_sub_field('content_title');
        $content = get_sub_field('content');?>
        <div class="carousel-item">
            <img src="<?= $image['url'] ?>" alt="<?= $image['alt'] ?>">
            <div class="carousel-text-block">
                <h4 class="mb-1"> <?= $content_title;?></h4>
                <p class="small m-0"> <?= $content;?></p>
            </div>
        </div>
    <?php endwhile;
endif; ?>

Hope it helps

WordPress advanced custom fields, loop though repeater

2 Answers