Добавить div каждые 4 элемента, начиная с 3-го элемента?

Немного предыстории … Я создал собственный тип публикации в WordPress, который включает в себя Избранные изображения, а также галерею изображений в поле Advanced Custom Fields. Я работаю над миниатюрой Bootstrap на основе этого кода: http://codepen.io/RetinaInc/pen/rxksh/

Все это прекрасно работает для верхней части. Я могу легко назвать Featured Image как первый элемент с примененным «активным» классом, а затем выполнить цикл foreach изображений галереи для элементов без активного класса. Отлично. Потрясающие.

Проблема, с которой я сталкиваюсь, для миниатюр слайдера. У меня есть первый элемент в первой «активной» строке просто отлично — опять же, Featured Image. Но мне нужно добавлять новую строку без «активного» класса после каждых 4 пунктов. Но в этом случае это означает, что у меня могут быть только первые 3 элемента галереи, так как первый элемент является избранным изображением. А потом после те первые 3 элемента галереи, которые мне нужны, чтобы перебрать каждые 4 элемента, добавив строку div без «активного» класса. Видишь мою дилемму? Я уверен, что это не дилемма для вас всех. Мои математические навыки отстой, а модуль все еще пугает меня, потому что я не очень хорошо понимаю это.

Вот код, который у меня есть сейчас (я отказался от модуля в конце прошлой ночью, так что область слайдера сейчас просто обычная HTML):

<?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();
?>

Я мог бы также добавить, что другая проблема, с которой я сталкиваюсь, заключается в том, как получить значение номера элемента для «data-slide-to» в слайдере миниатюр.

Конечно, все было бы гораздо проще, если бы я мог полностью исключить показанное изображение и просто иметь поле галереи. Но так хочет клиент.