Support

Account

Home Forums Add-ons Repeater Field Using ACF PRO with Repeater for Bootstrap Carousel

Solving

Using ACF PRO with Repeater for Bootstrap Carousel

  • Using the ACF Plugin I created a field called ‘slideshow_images’ and within the repeater I had a field named ‘image’.

    My original bootstrap html code is as follows:

    
    <header id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                </div>
                <div class="item">
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                </div>
                <div class="item">
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
            </a>
        </header>
    

    I included the PHP into the code above as follows:

    
    <?php if(get_field('slideshow_images')): ?>
        <header id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
            <?php $z = 0; while(the_repeater_field('slideshow_images')): ?>
            <?php $z = $z + 1; $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
                <div class="<?php echo ($z==1) ? 'active ' : ''; ?>item">
                    <div class="fill" style="background-image: url(<?php the_sub_field('image');?>);"></div>
                </div>
            <?php endwhile; ?>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
            </a>
        </header>
        <?php endif; ?>
    

    However, when I add my images and preview the site. Nothing shows up. There are no errors at all. When I view source, everything seems to be just fine but all I get is a Blank carousel(you can still see the indicators). What seems to be the issue?

  • What is the return type for the image field?

    If it’s array, there is an error but it’s printed into the inline styles so you can’t actually see it on the screen! So it’s kind of sneaky.

    To solve that you need to do <div class="fill" style="width: 100px; height: 100px; background-image: url(<?php echo get_sub_field('image')["sizes"]["full"] ?>);"></div> to get the image url from the array.

  • @hbroccoli I believe I set the return type of the image field as URL, not Array. When I view source when previewing the site, the url field in the html has the appropriate url with the image I just uploaded.

  • Do you have a width & height set on the .fill div?

  • @hbroccoli yes I added it, as shown below.

    
    <div class="fill" style="width: 1900px; height: 1080px; background-image: url(<?php the_sub_field('image');?>);"></div>

    But now my carousel doesnt move left or right. its stuck on the one image. When I view source my code shows up as seen below:

    
            <div class="carousel-inner">
                                <div class="item active">
                    <div class="fill" style="width: 1900px; height: 1080px; background-image: url(http://vagrantpress.dev/wp-content/uploads/2016/08/Wallpapersxl-Waterfall-Fanatsy-Landscape-From-Fantasy-738628-1900x1080.jpg);"></div>
                                    <div class="item ">
                    <div class="fill" style="width: 1900px; height: 1080px; background-image: url(http://vagrantpress.dev/wp-content/uploads/2016/08/Wallpapersxl-Waterfall-Fanatsy-Landscape-From-Fantasy-738628-1900x1080.jpg);"></div>
                                    <div class="item ">
                    <div class="fill" style="width: 1900px; height: 1080px; background-image: url(http://vagrantpress.dev/wp-content/uploads/2016/08/Wallpapersxl-Waterfall-Fanatsy-Landscape-From-Fantasy-738628-1900x1080.jpg);"></div>
                        </div>
    

    Which seems exactly like my html above.

  • Hi @movingsale

    I don’t think there’s a function called the_repeater_field(). Could you please check this page to learn how to use a repeater field: https://www.advancedcustomfields.com/resources/repeater/?

    Thanks 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Using ACF PRO with Repeater for Bootstrap Carousel’ is closed to new replies.