Use nested loops. The outer loop counts by 5, then two inner loops that print two elements and then three elements.
$len = count($list);
for($i = 0; $i < $len; $i += 5) {
echo '<div class="row double">';
for ($j = $i; $j < min($len, $i+2); $j++) {
echo '<div class="col-lg-6 col-12">' . $list($j) . '</div>';
}
echo '</div>';
if ($j >= $len) {
break;
}
echo '<div class="row triple">';
for (; $j < min($len, $i + 3); $j++) {
echo '<div class="col-lg-4 col-12">' . $list($j) . '</div>';
}
echo '</div>';
}
I’m trying to wrap every two elements in a div, and then every three elements in a div within a foreach loop. I’ve seen a lot of posts in regards to wrapping every 2, or 3, but I need alternating layouts for every group of twos and every group of threes.
This is the code I’ve tried to get working:
<?php $row = 2; ?>
<?php $count = 0; ?>
<?php $i=1;foreach($list as $item) : ?>
<?php if($count % $row == 0) : ## start 2 row ?>
<?php $endrow = 1; ?>
<div class="row double">
<?php endif; ?>
<div class="col-lg-6 col-12">
aaa
</div>
<?php if($count % $row == $endrow) : ## end 2 row ?>
</div>
<?php $i = 0; ?>
<?php $row = 3; ?>
<?php $endrow = 2; ?>
<?php endif; ?>
<?php if($count % $row == 0) : ## start 3 row ?>
<?php $endrow = 2; ?>
<div class="row triple">
<?php endif; ?>
<div class="col-lg-4 col-12">
bbb
</div>
<?php if($count % $row == $endrow) : ## end 3 row ?>
</div>
<?php $i = 0; ?>
<?php $row = 2; ?>
<?php $endrow = 1; ?>
<?php endif; ?>
<?php $count++;$i++;endforeach; ?>
And this is the output:
<div class="row double">
<div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
<div class="col-lg-4 col-12"> bbb </div>
<div class="col-lg-6 col-12"> aaa </div>
<div class="col-lg-4 col-12"> bbb </div>
<div class="row double">
<div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
<div class="col-lg-4 col-12"> bbb </div>
<div class="col-lg-6 col-12"> aaa </div>
<div class="col-lg-4 col-12"> bbb </div>
<div class="row double">
<div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
<div class="col-lg-4 col-12"> bbb </div>
<div class="col-lg-6 col-12"> aaa </div>
<div class="col-lg-4 col-12"> bbb </div>
<div class="row double">
<div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
<div class="col-lg-4 col-12"> bbb </div>
But this is what I’m trying to achieve:
<div class="row double">
<div class="col-lg-6 col-12"> aaa </div>
<div class="col-lg-6 col-12"> aaa </div>
</div>
<div class="row triple">
<div class="col-lg-4 col-12"> bbb </div>
<div class="col-lg-4 col-12"> bbb </div>
<div class="col-lg-4 col-12"> bbb </div>
</div>
<div class="row double">
<div class="col-lg-6 col-12"> aaa </div>
<div class="col-lg-6 col-12"> aaa </div>
</div>
<div class="row triple">
<div class="col-lg-4 col-12"> bbb </div>
<div class="col-lg-4 col-12"> bbb </div>
<div class="col-lg-4 col-12"> bbb </div>
</div>
<div class="row double">
<div class="col-lg-6 col-12"> aaa </div>
<div class="col-lg-6 col-12"> aaa </div>
</div>
Any help, or pointing in the right direction would be greatly appreciated!!
Thanks so much, that worked – although the second for loop is missing $j = $i 🙂