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++;
   }
 ?>

Where is the code you've written that you're having trouble with? — Tangentially Perpendicular
– Tangentially Perpendicular, Commented Mar 4, 2021 at 21:09
Please see the question again, I added the code that I tried — Code GuruDev
– Code GuruDev, Commented Mar 4, 2021 at 21:24

ADyson · Accepted Answer · 2021-03-04 22:14:24Z

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

Collectives™ on Stack Overflow

Splitting MySQL results into 3 columns with multiple rows using PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related