PHP Loop with multiples of - php

Question

I need to create a PHP loop to output the following HTML code. So basically, the first div has 'item active' followed by 4 divs, and each subsequent div only has a class of 'item' followed by 4 divs inside.
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+4"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="10" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="11" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
So far I have:-
<?php
if( have_rows('image_gallery', $street) ): $thumb = 0;
while ( have_rows('image_gallery', $street) ) : the_row(); $thumb++; ?>
<?php if ($thumb % 4 != 0) { ?>
<div class="item active">
<div data-target="#carousel" data-slide-to="<?php echo $thumb; ?>" class="thumb"><img src="<?php the_sub_field('image'); ?>"></div>
</div>
<?php } else { ?>
<div class="item">
<div data-target="#carousel" data-slide-to="<?php echo $thumb; ?>" class="thumb"><img src="<?php the_sub_field('image'); ?>"></div>
</div>
<?php } ?>
<?php endwhile;
else :
endif; ?>
Which doesn't do what I am wanting, so any help would be much appreciated.
EDIT,
Current the above code produces:-
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/berryheath-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/bradwell-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/castlegreen-street.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/langley-steet-2.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/langley-steet.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/queensbury-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/radleigh-street.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/saxonfields-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/weaverspoint-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="10" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/wessington-street.jpg"></div>
</div>
</div>

Answer 1

You can do something like this:
<?php
$counter = 0;
if(have_rows('image_gallery', $street)){
while(have_rows('image_gallery', $street)){
if($counter == 0){
?>
<div class="item active">
<?php
}elseif($counter % 4 == 0){
?>
</div>
<div class="item">
<?php
}
?>
<div data-target="#carousel" data-slide-to="<?php echo $counter; ?>" class="thumb"><img src="<?php the_sub_field('image'); ?>"></div>
<?php
++$counter;
}
?>
</div>
<?php
}
?>

Answer 2

First of all I'd recommend you to start using some sort of templating engine, for example Smarty. Mixing html with php as you do is very bad practice. Code is hardly readable, and very uncomfortable for supporting. If you will have to fix or change something in such code after some time passes, you will find yourself suffering much.
Simplest what you can do - put all data in array and implode() it with "\n" before output. It's also much easier to debug such constructions, and you will have clear php without html mixins.
This code
$products = array(
array(
0 => "http://placehold.it/100/e8117f/fff&text=Product+Main",
1 => "http://placehold.it/100/00ffff/000&text=Product+Image+2",
2 => "http://placehold.it/100/ff00ff/fff&text=Product+Image+3",
3 => "http://placehold.it/100/ffff00/000&text=Product+Image+4",
),
array(
4 => "http://placehold.it/100/612b65/fff&text=Product+Image+5",
5 => "http://placehold.it/100/00ffcc/000&text=Product+Image+6",
6 => "http://placehold.it/100/db371b/fff&text=Product+Image+7",
7 => "http://placehold.it/100/feb8aa/000&text=Product+Image+8",
),
array(
8 => "http://placehold.it/100/612b65/fff&text=Product+Image+5",
9 => "http://placehold.it/100/00ffcc/000&text=Product+Image+6",
10 => "http://placehold.it/100/db371b/fff&text=Product+Image+7",
11 => "http://placehold.it/100/feb8aa/000&text=Product+Image+8",
),
);
$tpl = ' <div data-target="#carousel" data-slide-to="__ID__" class="thumb"><img src="__SRC__"></div>';
$ret = array();
foreach($products as $pk=>$p) {
$ret[] = '<div class="item '.($pk==0?'active':'').'">';
foreach($p as $id=>$src) {
$ret[] = str_replace(array('__ID__','__SRC__'), array($id, $src), $tpl);
}
$ret[] = '</div><!-- /item -->';
}
$html = implode("\n",$ret);
print $html;
produces this output
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+4"></div>
</div><!-- /item -->
<div class="item ">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
<div class="item ">
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="10" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="11" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
See how much clearer code became? All you have to do - fill $products array properly.