Depending how many posts in a row have conditional HTML

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>
                                <a href="<?php the_permalink(); ?>" class="primary-btn">find out more</a>
                            </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%;
}

Read more here: Depending how many posts in a row have conditional HTML

Leave a Reply

Your email address will not be published. Required fields are marked *