title: HTML Image gallery with Dynamic with PHP
body: <p>I am trying to display images on a page using the bootstrap grid system, where their names are dynamically created by taking it from a database. For example I have this database, and I want to use the imageID in the src name of each image. Is there any cleaner way to do it without having to manually add a new div etc for each image?</p>
  
  <p>PHP Code for getting image id:</p>
  
  <pre><code>&lt;?php
  //dynamically render images
  
  include "../storescripts/connect-mysql.php";
  $sql = mysql_query("SELECT * FROM imageGallery ORDER BY dateAdded ASC");
  $images = array();
  $imageCount = mysql_num_rows($sql); //Count the amount of products
  if($imageCount &gt; 0){
      while($row = mysql_fetch_array($sql)){
          $image = $row['imageID'];
          $images[] = $image;
  }
  
  }else{
      $image_gallery = "&lt;h2&gt;You have no images in the database&lt;/h2&gt;";
  }
  ?&gt;
  </code></pre>
  
  <p>My HTML for displaying the images:</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
                  &lt;div class="col-md-3 galleryImg"&gt;
                      &lt;a href="#myModal" role="button" data-toggle="modal"&gt;&lt;img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/&lt;?php echo $images[0] ?&gt;.png" alt="Jedi Cycle Sport Gallery Image"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 galleryImg"&gt;
                      &lt;a href="#myModal" role="button" data-toggle="modal"&gt;&lt;img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/&lt;?php echo $images[1] ?&gt;.png" alt="Jedi Cycle Sport Gallery Image"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 galleryImg"&gt;
                      &lt;a href="#myModal" role="button" data-toggle="modal"&gt;&lt;img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/&lt;?php echo $images[2] ?&gt;.png" alt="Jedi Cycle Sport Gallery Image"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 galleryImg"&gt;
                      &lt;a href="#myModal" role="button" data-toggle="modal"&gt;&lt;img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/&lt;?php echo $images[3] ?&gt;.png" alt="Jedi Cycle Sport Gallery Image"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>See the image source for how I used the PHP.</p>