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!
