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

ACR Repeater - Alternating Content

Hi Guys,

I've got a tricky one here, I was wondering if anyone knows of a way of adding alternating content to a repeater field in wordpress.

I've got a simple 2-column layout where the image is either on the left of the copy or the right.

I was hoping to alternate this when displayed on the page. I know it's going to rely upon odd and even numbers - just can't find the exact syntax.

Hope you can help.

Many thanks, Jake

2 Answers

Stephen O'Connor
Stephen O'Connor
22,291 Points

I've done something similar to this before by adding another field (radio) to the repeater field called 'alignment' and give this two options: 'left' and 'right', and when you're adding content make sure you're giving each entry the appropriate alignment.

Then in your template you can use a conditional:

<?php if ( (get_sub_field('alignment')) == 'Right' ) { echo 'tablet-push-60 grid-40 push-60'; } ?> 

I used this code because I was using the Unsemantic Grid, but you could echo out whatever class you need to make the page display correctly, one for the image on the left and one for the image on the right.

I hope that makes sense ...

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

If each section is inside of a div you can use .odd .even CSS classes to float image and content within it to different sides without adding anything into the markup. Would that work?