rendering images in rows-CodePudding

trying to make this code render images in rows all to no avail. I initially tried to use boostrap's row and column classes and it didn't work. Then I tried the table element still no result. could you spot the problrm?

// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY id DESC LIMIT 5");

if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
        $imageURL = 'uploads/'.$row["file_name"];
?>
   <!-- begin post -->
   <div >
   <table>
   <tr>

   <td  style="width: 18rem;">
   <img src="<?php echo $imageURL; ?>" alt="" />
  <div >
    <h5 >Card title</h5>
    <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" >Go somewhere</a>
  </div>
    </td>

<?php }
}
else{ ?>
    <p>No image(s) found...</p>
<?php } ?> 
</tr> 
</table> 
</div>

CodePudding user response：

I've swapped in your db code for an array and foreach, but it is in the same spirit.

Use indentation, to help you get your loops and tags in order.

<?php

$images = [
    ['file_name' => 'foo.jpg'],
    ['file_name' => 'bar.jpg'],
    ['file_name' => 'baz.jpg'],
]
?>
<html>
    <?php if(!empty($images)) { ?>
        <table>
            <tr>
                <?php foreach($images as $row) { $imageURL = 'uploads/'.$row["file_name"]; ?>
                    <td  style="width: 18rem;">
                        <img src="<?php echo $imageURL; ?>" alt="" />
                        <div >
                            <h5 >Card title</h5>
                            <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" >Go somewhere</a>
                        </div>
                    </td>
                <?php } ?>
            </tr>
        </table>
    <?php } else { ?>
        <p>No image(s) found...</p>
    <?php } ?>
</html>

As others have said, there isn't anything really to be gained here by using a table.

CodePudding user response：

Does it show you the rest of the html elements or does it show you the message that there is no picture?

Check with the inspect tool what location the src attribute of the img element is.

You can add a backslash in the $imageURL variable

$imageURL = '/uploads/' . $row["file_name"];

Show us the structure and a record of the images table.

Give us more details about what happens when the page is loaded. Like what it loading in your page.

I suggest you ditch the tables and use boostrap instead.

Example here: https://getbootstrap.com/docs/4.0/components/card/