new to programming and just halfway through my website development course here so hopefully my questions not too dumb. I want to display 4 random images from a MySQL database (the images are stored in an uploads folder) and the code is as follows. It works fine but laying out the gallery code with bootstrap its not displaying the images across the page anymore. Thx in advance for any help
<?php
require 'includes/dbconnection.php';
$sql = "SELECT * from uploads ORDER BY RAND () LIMIT 4";
$result=mysqli_query($conn, $sql) or die ('Problem: '.$sql)."<br>";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<title>Pete's fishing adventures</title>
</head>
<body>
<!-- header and navigation -->
<?php include 'includes/header.php'; ?>
<div class="container">
<!-- body text -->
<header>
<h3>Celebrating the ones that got away and the ones that didnt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</header>
<!-- Featured carousel -->
<div class="carousel slide col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" data-ride="carousel" id="featured">
<div class="carousel-inner">
<div class="item active"><img class="img-responsive center-block" src="images/carousel1.jpg" alt="carousel1"></div>
<div class="item"><img class="img-responsive center-block" src="images/carousel2.jpg" alt="carousel2"></div>
<div class="item"><img class="img-responsive center-block" src="images/carousel3.jpg" alt="carousel3"></div>
<div class="item"><img class="img-responsive center-block" src="images/carousel4.jpg" alt="carousel4"></div>
<div class="item"><img class="img-responsive center-block" src="images/carousel5.jpg" alt="carousel5"></div>
</div> <!-- carousel inner -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- featured carousel -->
<div class="clearfix">
</div>
<!-- photo gallery -->
<div class="row">
<?php
if (mysqli_num_rows($result)) {
while ($row = mysqli_fetch_array($result)) { ?>
<div class="col-xs-3"> <!-- gallery images -->
<a class="thumbnail" href="#">
<img src="uploads/<?php echo $row['image_name'];?> " />
<div class="caption">
<h4>Gallery 1</h4>
<p>Some text about the photo.</p>
</div>
</a>
</div> <!-- end gallery image-->
<?php
} /* end of while statement */
} /* end if (mysqli_num_rows($result)) */
?>
</div> <!-- end $row -->
<!-- end of photo gallery -->
<?php
} /* end of while statement */
} /* end if (mysqli_num_rows($result)) */
?>
<!-- end of photo gallery -->
<!-- body text -->
<section>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>
</div> <!-- end container -->
<!-- Footer -->
<?php include 'includes/footer.php' ?>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
forI think you are creating a galley for each photo instead of one for all of them.
I think you should...
<div class="row">
<div class="col-xs-3"> <!-- gallery images -->
<?php
if (mysqli_num_rows($result)) {
while ($row = mysqli_fetch_array($result)) { ?>
<a class="thumbnail" href="#">
<img class="img-responsive" src="uploads/<?php echo $row['image_name'];?> " >
<div class="caption">
<h4>Gallery 1</h4>
<p>Some text about the photo.</p>
</div>
</a>
<!-- end gallery image-->
<?php
} /* end of while statement */
} /* end if (mysqli_num_rows($result)) */
?>
</div>
</div> <!-- end photo gallery -->
So to... first creat a new row. Then create a gallery in it. and then start the loop to populate the gallery