For each loop into bootstrap slider - php

Question

I come from a Java background and never really have the need for foreach loops, but due to career and personal study I am getting heavily into php. I am still trying to get my head around them and am struggling to incorporate a conditional within it. I believe I may use to use a key array but I am completely lost. If you could explain how to achieve this, plus best practice.
Here you can the foreach loop I am trying to incorporate:
<?php foreach ($products as $product) { ?>
<?php if ($product['thumb']) { ?>
<div class="image"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></div>
<?php } ?>
<?php } ?>
Into this:
<div class="container">
<div class="col-md-12">
<h1>In the Spotlight</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>
Thanks in advance to those who help

Answer 1

This is a rough example of how you can do it. Its pretty silly but it does the job and you should be able to understand it.
<?php
// echo code from the start .. until <div class="carousel-inner"> <div class="item active">
$inserted = 0;
foreach ($products as $product) {
if (array_key_exists('thumb', $product) && !empty($product['thumb'])) {
++$inserted;
// echo '... code from each row, e.g. <div class="col-md-3" ....',
if ($insert % 4 == 0) { // call this for every 4 images
// echo the end of the row
}
if ($insert == 12) {
// echo the final part because we displayed 12 items now
break; // exit the loop after the 12 items
} else {
// echo the start of a row again because we haven't got 12 yet
}
}
}
?>