Advanced custom fields pro repeater, working with bootstrap slider

Question

Hi guys im using WP advanced custom fields pro repeater function, trying get my bootstrap slider to work with advanced custom fields. here is my ACF set up

ACF setup WP side

and here is my bootsrap code with ACF integrated.

my code

<section class="pb-5">
    <div class="container">
        <div id="carousel_03" class="carousel slide" data-ride="carousel">
            <div class="row">
                <div class="col-lg-4">
                    <ol class="carousel-indicators tabs row">
                        <li class="col-lg-12 col-sm-6 mb-2 active">
                            <div data-target="#carousel_03" data-slide-to="0" role="button" class="carousel-indicator p-3">
                                <h4 class="mb-1">one</h4>
                            </div>
                        </li>
                        <li class="col-lg-12 col-sm-6 mb-2">
                            <div data-target="#carousel_03" data-slide-to="1" role="button" class="carousel-indicator p-3">
                                <h4 class="mb-1">two</h4>
                            </div>
                        </li>
                        <li class="col-lg-12 col-sm-6 mb-2">
                            <div data-target="#carousel_03" data-slide-to="2" role="button" class="carousel-indicator p-3">
                                <h4 class="mb-1">three</h4>
                            </div>
                        </li>
                        <li class="col-lg-12 col-sm-6 mb-2">
                            <div data-target="#carousel_03" data-slide-to="3" role="button" class="carousel-indicator p-3">
                                <?php
                                if( have_rows('slider') ):
                                    while ( have_rows('slider') ) : the_row();
                                        the_sub_field( 'title');
                                        ?>
                                <h4 class="mb-1"><?php the_sub_field($section . 'title') ?></h4>
                                    <?php
                                    endwhile;
                                endif;
                                ?>
                            </div>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-8 mb-3">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="some.svg" class="d-block w-100" alt="alt">
                        </div>
                        <div class="carousel-item">
                            <img src="some.svg" class="d-block w-100" alt="alt">
                        </div>
                        <div class="carousel-item">
                            <img src="some.svg" class="d-block w-100" alt="alt">
                        </div>
                        <div class="carousel-item">
                            <?php
                            if( have_rows('slider') ):
                                while ( have_rows('slider') ) : the_row();
                                    the_sub_field( 'image');
                                    ?>
                                    <img class="img-fluid"
                                         src="<?php the_sub_field($section . 'image') ?>"
                                         alt="<?php the_sub_field($section . 'alt') ?>">
                                <?php
                                endwhile;
                            endif;
                            ?>
                        </div>
                    </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>

            </div>
        </div>
    </div>
</section>

My aim for less code and to have ACF to pull all images for the slider in the correct order.

My problem

as I currently do not have my images in a array they all display where I cal my sub field, whats the best solution to get this working correctly ?

benJ benJ · Accepted Answer · 2019-08-27T14:58:13

You are better off using get_field() (https://www.advancedcustomfields.com/resources/get_field/) to retrieve the repeater values in this instance, as this returns an associative array containing all sub-field values.

You can then iterate that array to output the HTML you need for the Bootstrap carousel.

Also worth noting that the image values returned will also contain a key sizes with URLs to the images of all of your themes thumbnail sizes in it, if you want to output a particular image size in the carousel.

Note: I haven't actually tested this with Bootstrap, but it should work.

<?php

// get the ACF values using get_field()
$sliderImages = get_field('slider');

?>
<section class="pb-5">
    <div class="container">
        <div id="carousel_03" class="carousel slide" data-ride="carousel">
            <div class="row">
                <div class="col-lg-4">
                    <ol class="carousel-indicators tabs row">

                        <!-- Iterate images to output indicators -->
                        <?php foreach ($sliderImages as $imgNumber => $image) : ?>
                            <li class="col-lg-12 col-sm-6 mb-2<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
                                <div data-target="#carousel_<?= $imgNumber ?>" data-slide-to="<?= $imgNumber ?>" role="button" class="carousel-indicator p-3">
                                    <h4 class="mb-1"><?= $imgNumber + 1 ?></h4>
                                </div>
                            </li>
                        <?php endforeach ?>

                    </ol>
                </div>
                <div class="col-lg-8 mb-3">
                    <div class="carousel-inner">

                        <!-- Iterate images again to output carousel items -->
                        <?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'] ?>">
                            </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>
            </div>
        </div>
    </div>
</section>

Advanced custom fields pro repeater, working with bootstrap slider

1 Answers