dynamically display images using php mysql - php

Question

I am trying to converting this line of hard coded images into a dynamic code by using mysql to retrieve it.
<div class="item-block-1">
<span class="tag-sale"></span>
<div class="image-wrapper">
<div class="image">
<div class="overlay">
<div class="position">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>
Quick shop
</div>
</div>
</div>
<img src="images/photos/photo-3.jpg" style="margin: -32.5px 0 0 0;" alt="" />
</div>
</div>
<h2>Polka dot light blue blouse</h2>
<p class="price">$13.99<s>$36.99</s></p>
</div>
My dynamic code is as follow but it only allows me to retrieve only one image instead of looping through the codes..
<div class="item-block-1">
<div class="image-wrapper">
<div class="image">
<div class="overlay">
<div class="position">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>
Quick shop
</div>
</div>
</div>
<?php
$result = mysql_query("SELECT * FROM my_image", $connection);
while($row = mysql_fetch_array($result))
{
echo "<div><img src=\"uploadedimages/".$row['name']."\" /></div>";
}
?>
</div>
</div>
Can anyone correct me ?

Answer 1

Try this code
<?php
$result = mysql_query("SELECT * FROM my_image");
?>
<div class="item-block-1">
<div class="image-wrapper">
<div class="image">
<div class="overlay">
<div class="position">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>
Quick shop
</div>
</div>
</div>
<?php
while($row = mysql_fetch_array($result))
{
?>
<div>
<img src="new/<?php echo $row['name']; ?>"/>
</div>
<?php
}
?>
</div>
</div>
</div>

Answer 2

Since you're up for suggestions
<?php
/*
* I usually put this in a class, but doing this all in-line for you.
* I did this with PDO, which is just like mysql_, but better.
*/
$db_name = ''; // put your database name here
$db_host = ''; // your host name, usually localhost
$db_username = ''; // the database username used to access this database
$db_password = ''; // password associated with the username
$dsn = 'mysql:dbname='.$db_name.';host='.$db_host; // this is for the PDO object
$PDO = new PDO($dsn, $db_username, $db_password);
$query = 'SELECT * FROM my_image';
$Stmt = $PDO->prepare($query); // prepares your SQL
$Stmt->execute() // runs your SQL
// This will test to see if you get any images back from your database
if ($Stmt->rowCount() > 0) {
/*
* This means you have atleast 1 image back from your database
* The wile loop will iterate through your images from the database
* and generate the HTML below for each, only changing the name of the file
* on each iteration
*/
while ($row = $Stmt->fetch(PDO::FETCH_ASSOC)) {
echo '<div class="item-block-1">';
echo '<div class="image-wrapper">';
echo '<div class="image">';
echo '<div class="overlay">';
echo '<div class="position">';
echo '<div>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>';
echo 'Quick shop';
echo '</div>';
echo '</div>'; // class="position" div
echo '</div>'; // class="overlay" div
echo '<div><img src="uploadedimages/'.$row['name'].'" /></div>'; // This is the actual image
echo '</div>'; // class="image" div
echo '</div>'; // class="image-wrapper" div
echo '</div>'; // class="image-block-1" div
}
}
Of course this is not how to properly do this, but if you were to do it in-line like this, it would be this way. the while loop will generate the SAME html for every image, except for the image file path, which changes depending on the current row your in in the while loop.