ACF Repeater every nth pattern layout

Home » ACF Repeater every nth pattern layout

If you are using ACF Repeater, sometimes you want to repeat a pattern of HTML to display, let’s say, a grid of images that has 6 variations, and repeats over and over in that same pattern. Well prep thine eyeballs because here it is (this is using Bulma but any html will do, that’s not really important):

//we've got an ACF repeater field called Gallery
<?php if( have_rows('gallery') ): ?>


//container for the grid before the loop kicks off. We're using Bulma CSS on this
<section class="post-gallery">
  <div class="container">
<div class="columns is-marginless is-multiline is-variable is-2">

//set up a counter: There is already 'get_row_index' but we don't want that here...just set a normal php count
	<?php 
	$counter = 1;
	while( have_rows('gallery') ): the_row(); 

	// the usual variables
	$image = get_sub_field('image');
	$image_caption = get_sub_field('image_caption');
	$image_link = get_sub_field('image_link');
	
//if the counter is 1 or 2, display in HALVES (using 'column is-half', a Bulma class)
	if($counter == 1||$counter == 2){
	echo '<div class="column is-half"><figure style="background-image: url('.$image['url'].')"><img src="'.$image['url'].'" alt="'.$image['alt'].'" class="picalter"></figure></div>';
	}
//if the counter is 3, display in full width
	if($counter == 3){
	echo '<div class="column is-full"><figure style="background-image: url('.$image['url'].')"><img src="'.$image['url'].'" alt="'.$image['alt'].'" class="picalter"></figure></div>';
	}
//if the counter is 4, 5 or 6, display in THIRDS
	if($counter == 4||$counter == 5||$counter == 6){
	echo '<div class="column is-one-third"><figure style="background-image: url('.$image['url'].')"><img src="'.$image['url'].'" alt="'.$image['alt'].'" class="picalter"></figure></div>';
	}
//if the counter is less than 7, count up. Otherwise reset
	if($counter<7){
		$counter++;
	} else{
		$counter=1;
	}
 endwhile; ?>
      </div>
  </div>
</section>
<?php endif; ?>