php foreach loop implode every 3 loop - php

Question

I need to make a gallery. I have images from 01 to 09. I need to divide them on foreach. The first div must have an active class. And we need to repeat the div every 3 image. I need exactly this html:
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="01.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="02.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="03.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
</div>
...
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="07.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="08.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="09.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
</div>
But my code doesn't work. I don't know how to complete this...
Here is my PHP code:
<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$countedimage = 0;
$counteddiv = 0;
$count = count($images_bottom);
for ($x = 0; $x <= $count; $x++) {
$countedimage++;
$counteddiv++;
if($countedimage == '4') {
$countedimage = 0;
?>
<div class="item<?php if($counteddiv != '1') { ?> active<?php } ?>">
<div class="row">
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?php echo $images_bottom[$x]['popup']; ?>" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>

Answer 1

Firstly, lets start with grouping your images into multiples of three.
// An arbitrary list of image file names (used for clarity).
$images = ['image-1.jpg', 'image-2.jpg', 'image-3.jpg', 'image-4.jpg', 'image-5.jpg', 'image-6.jpg', 'image-7.jpg', 'image-8.jpg', 'image-9.jpg'];
// Separate images into groups of three.
$images = array_chunk($images, 3);
Next we need to look at the output. So taking your example HTML:
<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<?php // Loop over each group of three images ?>
<?php foreach ($images as $g => $group): ?>
<div class="item <?= ($g == 0) ? 'active' : '' ?>">
<div class="row">
<?php // Loop over each image in group ?>
<?php foreach ($group as $i => $image): ?>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?= $image ?>" class="img-responsive" alt="a" />
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>

Answer 2

So, you basically want to print this portion for every item:
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?php echo $src ?>" class="img-responsive" alt="a"/>
</div>
</div>
</div>
And you only want to print this portion every 3rd time, around groups of 3 of the above chunks:
<div class="item active">
<div class="row">
</div>
</div>
Instead of trying to keep track of 2 separate counts as you are doing, you can simplify things by using the modulus operator % along with the index of your loop $x.
This is really useful when you want to repeat something at certain intervals. Essentially, you can repeat something every $z number of times by doing something like:
if($totalCount % $z == 0)
Example:
for ($x = 1; $x < 50; $x++) {
if ($x % 5 == 0) echo $x . '<br>';
}
// results:
// 5
// 10
// 15
// 20
// 25
// 30
// 35
// 40
// 45
In your case, something like this would work:
<?php for ($x = 0; $x < count($images_bottom); $x++) {
$src = $images_bottom[$x]['popup'];
$item_active = $x==0 ? 'item active' : 'item'; // only use 'item active' first one
if ($x % 3 == 0) { // only display every 3rd time?>
<div class="<?php echo $item_active ?>">
<div class="row">
<?php } ?>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?php echo $src ?>" class="img-responsive" alt="a"/>
</div>
</div>
</div>
<?php if ($x % 3 == 2 || $x == count($images_bottom)-1){ // only display after every 3rd time (after items 0, 1, 2) or on last one ?>
</div>
</div><?php } ?>
<?php } ?>