Depending how many posts in a row have conditional HTML - php

Question

I'm using Advanced Custom Fields to display a CPT on a certain page. I have it set up so that it wraps every 3 posts in a div class of o-table-cell with a parent div using the class o-table, which is working fine.
I'm using display:table; and display:table-cell as the content all has to relate to each other in terms of height and positioning and this works best.
How it works so far:
<div class="o-table">
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
</div>
<div class="o-table">
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
</div>
However sometimes I only have one or two posts per row, which causes the o-table-cell to fill the o-table, regardless of width and max-width being set. So I would like to also count if there is only 1 post or two posts in a row, so I can add in some blank o-table-cell divs.
Example of how I would like it work:
<div class="o-table">
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
</div>
<div class="o-table">
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Empty table cell</div>
</div>
<div class="o-table">
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Empty table cell</div>
<div class="o-table-cell">Empty table cell</div>
</div>
<div class="o-table">
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell">Dynamic Content</div>
</div>
My code so far:
<?php
$posts = get_field('training_courses_posts');
if( $posts ): ?>
<div class="o-table o-mrg-btm-1">
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT)
if ($i > 0 && ($i %3 == 0)) {
?>
</div>
<div class="o-table o-mrg-btm-1">
<?php } ?>
<?php setup_postdata($post); ?>
<div class="o-table-cell o-table-vt classes-item-wrapper classes-item-alt">
<div class="classes-item <?php the_field('color'); ?>">
<a href="<?php the_permalink(); ?>" class="classes-image">
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url($thumb, 'full'); //get img URL
$image = aae_aq_resize($img_url, 550, 400, true, '', true);
?>
<img src="<?php echo $image[0]; ?>">
</a>
<h2 class="classes-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div class="classes-excerpt"><?php the_field('next_course');?></div>
find out more
</div>
</div>
<?php $i++; endforeach; ?>
</div>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
CSS:
.o-table {
display: table;
height: 100%;
width: 100%;
}
.o-table-cell {
display: table-cell;
-webkit-box-flex: 0;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
width: 33.3333333333%;
margin-bottom: 30px;
height: 100%;
}

Answer 1

The Code is very much similar to yours, instead of using modulus I used equality check. I am using it in same way, in my website also.
I hope it will work for you as well.
$count = 0;
$posts = get_field('training_courses_posts');
if( $posts ): ?>
<div class="o-table o-mrg-btm-1">
<?php
foreach( $posts as $post): // variable must be called $post (IMPORTANT)
setup_postdata($post);
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url($thumb, 'full'); //get img URL
$image = aae_aq_resize($img_url, 550, 400, true, '', true);
if($count == 3)
{
echo '</div><div class="o-table o-mrg-btm-1">';
}
?>
<div class="o-table-cell o-table-vt classes-item-wrapper classes-item-alt">
<div class="classes-item <?php the_field('color'); ?>">
<a href="<?php the_permalink(); ?>" class="classes-image">
<img src="<?php echo $image[0]; ?>">
</a>
<h2 class="classes-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div class="classes-excerpt">
<?php the_field('next_course');?>
</div>
find out more
</div>
</div>
<?php $count++;
endforeach;
?>
</div>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
?>