How can i display images horizontally using PHP and mysql?

Question

I am trying to get images from a database in mysql and then show them horizontally in rows of 3 or etc, i also want to have the relavant image show over the top of my image. I do not know how to do this. Heres my Code in my main div.

<div class="container" id="content">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-4">
               <?php do { ?>              

            <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
            <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
            <p><?php echo $rsMissions['missions_name']; ?></p>
            </a>

<?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>
</div>
</div>

Here is my php query which i think is allgood.

<?php
  require_once('includes/dbconn.php');
  $missions_sql = "SELECT missions_id, missions_name, missions_image FROM missions";
$missions_query = mysqli_query($dbconn, $missions_sql) or die(mysqli_error());
$rsMissions = mysqli_fetch_assoc($missions_query);

?>

Here is my css for the relevant divs

.row{
  width: 1360px;  
}

.container{
width: 1360px;    
}

.col-md-4 img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
          padding: 2px;
          position: relative;
}

.col-md-4 img:hover {
  -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
    -o-filter: blur(2px);
      -ms-filter: blur(2px);
          filter: blur(2px);    
}

.col-md-4 p{

    -webkit-transition: all 0.9s;
  -moz-transition: all 0.9s;
  -ms-transition: all 0.9s;
  -o-transition: all 0.9s;
  transition: all 0.9s;
  visibility: hidden;
  position: absolute;

  top: 175px;
  left: 60px;
  text-decoration: none;
  font-size: 60px;
  opacity: 0;
  color: #fff;
  font-family: 'Raleway';   
}

.col-md-4:hover p{
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.9s;
  -moz-transition: all 0.9s;
  -ms-transition: all 0.9s;
  -o-transition: all 0.9s;
  transition: all 0.9s;    
}

Answer 1

You have to put the loop before col-md-4 class. Otherwise the div will not repeat. You cant get your images horizontally.Try below code and it will fine for you.

<div class="container" id="content">
<!-- Example row of columns -->
<div class="row">
  <?php do { ?>
    <div class="col-md-4">
        <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
        <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
        <p><?php echo $rsMissions['missions_name']; ?></p>
        </a>
    </div>
 <?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>

Answer 2

I think you put your code in a wrong place. Try to change it like this code below if it works.

<div class="container" id="content">
    <!-- Example row of columns -->
    <div class="row">
      <?php do { ?>
        <div class="col-md-4">
            <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
            <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
            <p><?php echo $rsMissions['missions_name']; ?></p>
            </a>
        </div>
     <?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>
</div>

Answer 3

 <?php $servername = 'localhost'; $username = 'root'; $password = ''; $dbname = 'ledp'; //create connection $conn = new mysqli($servername,$username,$password,$dbname); //check connection if($conn->connect_error) { die ('Error: Failed to connect database'.$conn->connect_error); } if(isset($_POST['submit5'])) { $pro_image = $_FILES['pro_image']; $tmp = $_FILES['pro_image']['tmp_name']; $name = $_FILES['pro_image']['name']; move_uploaded_file($tmp,'upload/'.time().$name); if($name = '') { echo 'Image upload failed'; } else { echo 'Image uploaded'; } } $files = glob('upload/*.*'); //loop $i; for($i=0;$i<count($files);$i++){ $image = $files[$i]; echo basename($image); echo '<div class="container-fluid">'; echo '<div class="row">'; echo '<div class="col-3 d-flex">'; echo '<img class="img-fluid" src="'.$image.'" alt="" width = 300px>'.'<br><br>'; echo '</div>'; echo '</div>'; echo '</div>'; }; echo "<h2>Total images: $i </h2>"; $conn->close(); ?>