在循环中包裹每两个Div

Question

My HTML Structure is as follows:

<div class="container">

<div class=row 1>
<img src="#" />
<img src="#" />
</div>

<div class=row 2>
<img src="#" />
<img src="#" />
</div>

<div class=row 3>
<img src="#" />
<img src="#" />
</div>

</div>

I will use for each loop. After each two iterations of for each loop, I want to start new container div and row 1, row 2 and row 3 divs. I mean main div should wrap 3 rows and each row div will wrap two images or div. I am using a single loop. How should I apply the for each loop counter for this?

Answer 1

Assuming you have an array of images or other content you want to put into those divs. This is the concept of what you have to do, then you can adapt it as you need or use your favorite coding styling:

<?php

$contents = array('img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg','img6.jpg');

echo '<div class="container">'; 

$rowCount = 0;

foreach ($contents as $key => $value) {

    if ($key % 2 == 0) {

        if ($key > 0) {

            echo "</div><!--close .row-->";
        }

        $rowCount++;

        echo '<div class="row row' . $rowCount . '"><!--opening .row-->';
    }

    echo '<img src="' . $value . '" alt="This is image: ' . $value . '">';

}

echo '</div><!--close .row-->';
echo '</div><!--close .container-->';

It will render:

<div class="container">
    <div class="row row1"><!--opening .row-->
        <img src="img1.jpg" alt="This is image: img1.jpg">
        <img src="img2.jpg" alt="This is image: img2.jpg">
    </div><!--close .row-->
    <div class="row row2"><!--opening .row-->
        <img src="img3.jpg" alt="This is image: img3.jpg">
        <img src="img4.jpg" alt="This is image: img4.jpg">
    </div><!--close .row-->
    <div class="row row3"><!--opening .row-->
        <img src="img5.jpg" alt="This is image: img5.jpg">
        <img src="img6.jpg" alt="This is image: img6.jpg">
    </div><!--close .row-->
</div><!--close .container-->

It will work with whatever amount of images you put in your array.