Bootstrap and PHP causing strange formatting in photo grid using loops

Question

I am currently working on a photography website as side project using HTML, CSS, bootstrap, and PHP. Currently, I am pulling all images from their specified folders e.g. images/senior, or images/headshots. This is done using PHP foreach loops. The problem lies in that after 4 images are added to a row, I am creating a new row with 4 new columns, instead of just adding the photos to existing columns. This creates a formatting gap between each rows, especially when photos are different sizes. I am looking for a solution that will continually add photos to columns one by one until the folder is exhausted. Any help will be much appreciated as I am still learning PHP and Web dev.

<div class="lightgallery1">
    <div class="row">

    <h2 id = "portrait" class="headingCursiveSM">Portraiture</h2>

    <?php 
          $dirname = "images/portrait/";
          $images = glob($dirname."*.jpg");
          $x = 0;
          foreach($images as $image) {
              ++$x;
              echo '<div class="col-md-3">
                            <div class="thumbnail">
                            <a href="'.$image.'" data-lightbox="portGallery" >
                            <img class = "img-responsive lazyload" data-src="'.$image.'" src="images/blank.jpg" alt="'.$image.'">
                            </a>
                            </div>
                    </div>';
                    if(($x % 4) == 0 ){
                      echo '</div>
                            <div class = "row">';
                    }
          }
         ?>
          </div>
     </div>

Example of size variation

I would like to keep the longer images the way they are. I am more or less looking to fill the space between images. — Jared Teller, Jan 15 '19 at 01:02
By adding images to the columns that preexist instead of creating new ones in new rows. I just do not know how to do that using loops. — Jared Teller, Jan 15 '19 at 01:04
basically what you want to do is similar to [pinterest](https://www.pinterest.com/)? — Mark Vincent Manjac, Jan 15 '19 at 01:57
Try to look at this [https://stackoverflow.com/questions/12570559/is-it-possible-to-create-a-pinterest-like-layout-with-bootstrap-only](https://stackoverflow.com/questions/12570559/is-it-possible-to-create-a-pinterest-like-layout-with-bootstrap-only) — Mark Vincent Manjac, Jan 15 '19 at 02:00
I think, you need to use images height auto. Then you all image get auto height and will be auto resize. :) — TanBir Developer, Jan 15 '19 at 05:37

Bootstrap and PHP causing strange formatting in photo grid using loops

0 Answers0