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

<?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();

?>

Answer 2

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 3

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>