Splitting MySQL results into 3 columns with multiple rows using PHP

Question

I want to show a gallery section in my website.

There are 3 slides and in each slide I want to show 3 columns. The first column should be col-md-6 and second & third column should col-md-3. In first column I want to show only 1 image, and 2 images in the second & third columns.

I'm very confused about how to split bootstrap columns. I want to split columns, just like the following screenshot:

This is the html code that I want to create:

 <div class="gallery-slick">
    <div class="slide">
        <div class="col-md-6">
            <img src="g1.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g2.png" alt="1" />
            <img src="g3.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g4.png" alt="1" />
            <img src="g5.png" alt="1" />
        </div>
    </div>
    <div class="slide">
        <div class="col-md-6">
            <img src="g6.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g7.png" alt="1" />
            <img src="g8.png" alt="1" />
        </div>
        <div class="col-md-3">
            <img src="g9.png" alt="1" />
            <img src="g10.png" alt="1" />
        </div>
    </div>
    <div class="slide">
        <div class="col-md-6">
            <img src="g10.png" alt="1" /
        </div>
        <div class="col-md-3">
            <img src="g12.png" alt="1" /
            <img src="g13.png" alt="1" /
        </div>
        <div class="col-md-3">
            <img src="g14.png" alt="1" /
            <img src="g15.png" alt="1" /
        </div>
    </div>
 </div>

This is the data which comes from the database:

 Array
 (
     [0] = stdClass Object
         (
             [id] = 2
             [photo] = upload/gallery/gallery_image_1836387580.png
         )
 
     [1] = stdClass Object
         (
             [id] = 3
             [photo] = upload/gallery/gallery_image_1367321200.png
         )
 
     [2] = stdClass Object
         (
             [id] = 4
             [photo] = upload/gallery/gallery_image_1422567964.png
         )
 
     [3] = stdClass Object
         (
             [id] = 5
             [photo] = upload/gallery/gallery_image_2112675692.png
         )
 
     [4] = stdClass Object
         (
             [id] = 6
             [photo] = upload/gallery/gallery_image_110346512.png
         )
 
     [5] = stdClass Object
         (
             [id] = 7
             [photo] = upload/gallery/gallery_image_915229176.png
         )
 
     [6] = stdClass Object
         (
             [id] = 8
             [photo] = upload/gallery/gallery_image_400191899.png
         )
 
     [7] = stdClass Object
         (
             [id] = 9
             [photo] = upload/gallery/gallery_image_1354992115.png
         )
 
     [8] = stdClass Object
         (
             [id] = 10
             [photo] = upload/gallery/gallery_image_1844003279.png
         )
 
     [9] = stdClass Object
         (
             [id] = 11
             [photo] = upload/gallery/gallery_image_383841711.png
         )
 
     [10] = stdClass Object
         (
             [id] = 12
             [photo] = upload/gallery/gallery_image_1783795689.png
         )
 
     [11] = stdClass Object
         (
             [id] = 13
             [photo] = upload/gallery/gallery_image_1138891555.png
         )
 
     [12] = stdClass Object
         (
             [id] = 14
             [photo] = upload/gallery/gallery_image_335457236.png
         )
 
     [13] = stdClass Object
         (
             [id] = 15
             [photo] = upload/gallery/gallery_image_2106903436.png
         )
 
 )

Here is the code that I tried but I didn't succeed:

 <?php 
   $gallery = $this-crud-getDataAll('gallery'); 
   $i = 1;
   foreach ($gallery as $photo) {
    if ($i > 0 AND $i % 3 == 0) {
      echo '<div class="row">';
        echo '<div class="col-md-3">';
        echo 'Cell '.$i;
        echo '</div>';
      echo '</div>';
    }
    $i++;
   }
 ?>

Answer 1

The code you've got is only a basic attempt and doesn't even try to create the col-md-6 part, never mind try to split into the more complex layout. There's also no attempt to create the image tags or the outer HTML. You didn't get very far with this task.

The code below will achieve the HTML you specified. Note it uses the modulo of 5, because it's every 5th picture that you want to start a new slide and have an md-6 column, not every 3rd one. And then it needs to only create the md-3 columns when it's not a modulo number. And it also needs to increment $i an extra time in that section to get the 2 images inside one div. $i also needs to start at 0, not 1.

$gallery = $this-crud-getDataAll('gallery'); 
echo '<div class="gallery-slick">';

for ($i = 0; $i < count($gallery); $i++) {
  if ($i % 5 == 0) {
    if ($i > 0) echo '</div>';
    echo '<div class="slide">';
    echo '<div class="col-md-6">';
    echo '<img src="'.$gallery[$i]->photo.'" alt="'.$gallery[$i]->id.'" />';
    echo '</div>';
  }
  else
  {
    echo '<div class="col-md-3">';
    echo '<img src="'.$gallery[$i]->photo.'" alt="'.$gallery[$i]->id.'" />';
    $i++;
    echo '<img src="'.$gallery[$i]->photo.'" alt="'.$gallery[$i]->id.'" />';
    echo '</div>';
  }
}
if ($i > 0) echo '</div>';
echo '</div>';

Demo: http://sandbox.onlinephpfunctions.com/code/d165a0f9ec5320c031d4b0249179e13f6624aebc