Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jake Bolton
Jake Bolton
1,956 Points
Posted by Jake Bolton
Jake Bolton
1,956 Points

ACF odd/even repeater

Hello all,

I'm trying to create a two column element using ACF repeater fields. The only thing is I'm trying to alternate this so that the content in the two columns switches left/right depending on the row being even or odd.

I've tried a few small tutorials but haven't been able to get it work yet.

Can anyone point me in the direction of a turorial

Many thanks.

4 Answers

Eric Buchmann
Eric Buchmann
15,080 Points
Eric Buchmann
Eric Buchmann
15,080 Points

If you have some PHP code that is already looping thru the repeater array you could add some sort of counter before that, like $count = 0, and then in the loop increment it ($count++). You'll also want some sort of if/else statement to check whether the $count variable is odd or even...

if($count % 2 == 0) { //even}
else { //odd }

Depending on how your looping things you then take the information in the repeater field and place it in one of two variables, basically an odd and even variable. Once you have done all of that you should end up with the two new variables with all the odd items in one and all the even items in the other. So if you have two columns on your page you would loop thru the odd items first and place them all within the left column and then look thru all the even items and place them in the right column.

Jake Bolton
Jake Bolton
1,956 Points
Jake Bolton
Jake Bolton
1,956 Points

Thanks Eric, this look like it might do the trick.

Here's the code I'm working with, just not sure where I need put the 'if' statement.

Sorry I'm not the most experienced using php

 <!-- Content --> 
    <div class="container-fluid home-fluid">
        <!-- Repeater --> 
        <div class="container home-row">
            <?php $row = 1; if(get_field('hero_set')): ?>
            <?php while(has_sub_field('hero_set')): ?>

            <div class="row">       

                <!-- right column -->

                <div class="col-md-6 col-md-push-6">

                    <div class="hero-link" style="background-color: #cccccc;">

                        <a href="<?php the_sub_field('link'); ?>" class="hero-alt"><?php the_sub_field('text'); ?><span class="arrow pull-right"></span></a>
                        <img src="<?php the_sub_field('image'); ?>" width="100%" />


                    </div>

                </div><!-- /. right column -->

                <!-- left column -->

                <div class="col-md-6 col-md-pull-6 col-sm-6">

                    <div class="hero-link" style="background-color: #0068B3;">

                        <?php the_sub_field('content'); ?><br/><br/>
                        <a href="<?php the_sub_field('link'); ?>" class="hero-arrow">></a>

                        <?php endwhile; // while( has_sub_field('left_col') ): ?>

                    </div>
                </div><!-- /. left column -->
            </div>

            <?php $row++; endwhile; ?>
            <?php endif; ?>

        </div><!-- /. Repeater -->
    </div><!-- /.Content --> ```
Jake Bolton
Jake Bolton
1,956 Points
Jake Bolton
Jake Bolton
1,956 Points

Sorry that didn't display very well

<!-- Content --> 
    <div class="container-fluid home-fluid">
        <!-- Repeater --> 
        <div class="container home-row">
            <?php $row = 1; if(get_field('hero_set')): ?>
            <?php while(has_sub_field('hero_set')): ?>

            <div class="row">       

                <!-- right column -->

                <div class="col-md-6 col-md-push-6">

                    <div class="hero-link" style="background-color: #cccccc;">

                        <a href="<?php the_sub_field('link'); ?>" class="hero-alt"><?php the_sub_field('text'); ?><span class="arrow pull-right"></span></a>
                        <img src="<?php the_sub_field('image'); ?>" width="100%" />


                    </div>

                </div><!-- /. right column -->

                <!-- left column -->

                <div class="col-md-6 col-md-pull-6 col-sm-6">

                    <div class="hero-link" style="background-color: #0068B3;">

                        <?php the_sub_field('content'); ?><br/><br/>
                        <a href="<?php the_sub_field('link'); ?>" class="hero-arrow">></a>

                        <?php endwhile; // while( has_sub_field('left_col') ): ?>

                    </div>
                </div><!-- /. left column -->
            </div>

            <?php $row++; endwhile; ?>
            <?php endif; ?>

        </div><!-- /. Repeater -->
    </div><!-- /.Content -->
Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Jake. Following Eric's suggestion, I'd do something like this:

<!-- Content --> 
    <div class="container-fluid home-fluid">
        <!-- Repeater --> 
        <div class="container home-row">
            <?php $row = 0; //<-- set your counter to 0
                        if(get_field('hero_set')): ?>
            <?php while(has_sub_field('hero_set')): ?>

            <div class="row">       

                <?php if ($counter % 2 === 0) :?>
                <!-- right column -->

                <div class="col-md-6 col-md-push-6">

                    <div class="hero-link" style="background-color: #cccccc;">

                        <a href="<?php the_sub_field('link'); ?>" class="hero-alt"><?php the_sub_field('text'); ?><span class="arrow pull-right"></span></a>
                        <img src="<?php the_sub_field('image'); ?>" width="100%" />


                    </div>

                </div><!-- /. right column -->

                 <?php else: ?>

                <!-- left column -->

                <div class="col-md-6 col-md-pull-6 col-sm-6">

                    <div class="hero-link" style="background-color: #0068B3;">

                        <?php the_sub_field('content'); ?><br/><br/>
                        <a href="<?php the_sub_field('link'); ?>" class="hero-arrow">></a>

                    </div>
                </div><!-- /. left column -->

            <?php endif; ?>

            <?php $row++; endwhile; ?>

             </div>  
            <?php endif; ?>

        </div><!-- /. Repeater -->
    </div><!-- /.Content -->