Support

Account

Home Forums Add-ons Repeater Field How to loop repeater rows so 3 in a div and then next 3 more in a div, etc

Solved

How to loop repeater rows so 3 in a div and then next 3 more in a div, etc

  • Hi, ACF community!

    I’m coding a yoga studio staff page where there are three floated repeater row divs per containing div. Teacher, teacher, teacher in a containing div and then teacher, teacher, teacher in a containing div below that and so on.

    This code makes it so there is one teacher per div, but I can’t figure out how to code 3 teachers per div. (I can get it so there’s one div containing all the teachers, but they’re floated and different lengths so they hit each other, so I want each 3 in a containing div.)

    Here’s my code (thank you!):

    <?php /* Template Name: Teachers */ ?>
    
    <?php get_header(); ?>
    
    <div class="wrapper">
    
        <h2><?php the_title(); ?></h2>
        
        <?php while ( have_posts() ) : the_post(); ?> 
            
            <?php
    
    		// check if the repeater field has rows of data
    		if( have_rows('teachers') ):
    
     		// loop through the rows of data
        	while ( have_rows('teachers') ) : the_row(); 
    		
    		// vars
    		$teacher_bio = get_sub_field('teacher_bio');
    		$teacher_name = get_sub_field('teacher_name');
    		$teacher_image = get_sub_field('teacher_photo');
    
            // display a sub field value ?>
            
            <div id="teachers" class="cf">
            
                <div class="teacher">
                
                <img src="<?php the_sub_field('teacher_photo'); ?>" />
                
                <p> <?php echo $teacher_name; ?> </p>
                
                <?php echo $teacher_bio; ?>
                
                </div> <!-- .teacher -->
            
            </div> <!-- #teachers -->
    
        	<?php endwhile;
    
    		else :
    
       		// no rows found
    
    		endif;
    
    		?>
    
    	<?php endwhile; ?>
    
    </div> <!-- .wrapper -->      
        
    <?php get_footer(); ?>
  • This is just your row loop with some additions. I also modified and id of a div so that you don’t repeat id values, you should probably use a class of “teachers” rather than an id.

    
    // check if the repeater field has rows of data
    if( have_rows('teachers') ):
      // loop through the rows of data
    
      // add a counter
      $count = 0;
      $group = 0;
      
      while ( have_rows('teachers') ) : the_row(); 
        // vars
        $teacher_bio = get_sub_field('teacher_bio');
        $teacher_name = get_sub_field('teacher_name');
        $teacher_image = get_sub_field('teacher_photo');
        if ($count % 3 == 0) {
          $group++;
          ?>
            <div id="teachers-<?php echo $group; ?>" class="cf group-<?php echo $group; ?>">
          <?php 
        }
        ?>
        <div class="teacher">
          <img src="<?php the_sub_field('teacher_photo'); ?>" />
          <p><?php echo $teacher_name; ?></p>
          <?php echo $teacher_bio; ?>
        </div><!-- .teacher -->
        <?php 
          if ($count % 3 == 2) {
            ?>
              </div><!-- #teachers -->
            <?php 
          }
          $count++;
        endwhile;
    else :
      // no rows found
    endif;
    
  • Oh, wow — I want to jump through the screen and hug you! I’m going to pick that apart and study what you did.

    And thanks for pointing out that the div should have a class not an id. Left in from when I only had one div containing it all. Thank you!

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

The topic ‘How to loop repeater rows so 3 in a div and then next 3 more in a div, etc’ is closed to new replies.