Add a div every 4 items, starting after the 3rd item?

Question

A little background...I've created a custom post type in WordPress that includes the Featured Image as well as a gallery of images in an Advanced Custom Fields field. I'm working on a Bootstrap thumbnail slider based on this code: http://codepen.io/RetinaInc/pen/rxksh/

It all works great for the upper section. I'm able to easily call the Featured Image as the first item with the "active" class applied, and then run through a foreach loop of the gallery images for the items without the active class. Perfect. Awesome.

The problem I'm running into is for the slider thumbnails. I've got the first item in the first "active" row just fine - again, the Featured Image. But I need to add a new row without the "active" class after every 4 items. But in this case, that means that I can only have the first 3 items of the gallery since the first item is the featured image. And then after those first 3 gallery items I need to iterate every 4 items, adding a row div without the "active" class. See my dilemma? I'm sure it's not a dilemma to y'all. My math skills kinda suck, and modulus still kind of scares me because I don't understand it terribly well.

Here's the code as I have it now (I gave up on the modulus thing late last night, so the slider area is pretty much just plain html right now):

<?php
<!-- Begin Carousel-->
<div class="container-fluid">
    <div class="row">

        <div id="carousel" class="plan-carousel slide" data-ride="carousel">
            <div class="carousel-inner">

                <?php
                    $thumbnail_id   = get_post_thumbnail_id();
                    $thumbnail_url  = wp_get_attachment_image_src( $attachment_id, $size='speight-plan' );
                    $thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attatchment_image_alt', true );
            ?>

                <div class="item active">
                    <img src="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'speight-plan')[0]; ?>">
                </div>

                <?php
                    $images = get_field('site_photos');
                    $size = 'speight-plan';

                        if( $images ):
                            foreach( $images as $image ):
                            $thumb = $image['sizes'][ $size ];
                ?>

                <div class="item">
                    <img src="<?php echo $thumb; ?>">
                </div>

                            <?php endforeach; 
                        endif;
                ?>

            </div>
        </div>

        <!-- Indicators -->

        <div class="clearfix">

        <div id="thumbcarousel" class="plan-carousel slide" data-interval="false">
            <div class="carousel-inner">

                <div class="item active">
                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'speight-plan')[0]; ?>"></div>

                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="image.jpg"></div>
                </div>

                <div class="item">
                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="image.jpg"></div>
                </div><!-- /item -->

            </div><!-- /carousel-inner -->

            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>

            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div><!-- /thumbcarousel -->

    </div>
</div>

<?php     
    wp_reset_postdata();
    wp_reset_query();
?>

I might also add that the other problem I'm having is how to get the item number value for "data-slide-to" in the thumbnail slider.

Of course this would all be rather easier if I could eliminate the featured image altogether and just have the gallery field. But this is how the client wants it.

Answer 1

Why don't you just do it something like this, adding a counter and checking for every 4th item:

if( $images ):
  $i = 0;
  foreach( $images as $image ):
    $thumb = $image['sizes'][ $size ];
    ?>

    <div class="item">
       <img src="<?php echo $thumb; ?>">
    </div>

  <?php 
     $i++;
     if ($i%4 == 0): ?>
        <div class = "item">

        </div>
     <?php endif;
    endforeach; 
endif; ?>