PHP MYSQL - display images in 3 columns

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
cjkeane
Forum Contributor
Posts: 217
Joined: Fri Jun 11, 2010 1:17 pm

PHP MYSQL - display images in 3 columns

Post by cjkeane »

I have a mysql database with product images, prices, filenames (images are stored in a folder). I'm trying to retreive the images so that they are displayed in 3 columns. Yes there are 4 product images in the database, so it incriments properly and finds the correct number of images in the db, its just that the same image and same filename is displayed 4 times. I've been struggling with this for quite some time. i'm wondering if anyone can see where my issue is? Any help would be appreciated. Thank you.

Code: Select all

<?php
$con = mysql_connect("localhost","root","pw");
mysql_select_db('db',$con);
if (!$con)  {
  die('Could not connect: ' . mysql_error());
 }
$query = "SELECT id,file_name,file_size,file_type,file_desc,prod_sale_price,prod_name FROM products GROUP BY prod_name ORDER BY id DESC";
$result = mysql_query ($query) or die(mysql_error());
if (mysql_num_rows($result) == 0) {
    echo "<p>There currently are no products listed on the website.</p>";
} else {
$rows = mysql_num_rows($result);
$array = mysql_fetch_array($result);
if($array) {
$prod_name = $array['prod_name'];
$file_name = $array['file_name'];
}

$counter = 1;
$cols = 3;
echo ("<table>\n");
for($i = 0; $i < $rows/$cols; $i++) {
echo ("<tr>");
for($j=0; $j < $cols && $counter <= $rows ;$j++, $counter++) {
?>
<td><p><h2><?php echo $prod_name; ?></h2>
        <br />
        <p><img style="width: 305px; height: 174px; float:left; margin-right: 10px; border: 1px dashed #CCC;" src="images/<?php echo $file_name; ?>" />
         <div class="clear"></div>
         <div style="float:left; " ><a href="#"><img src="images/read_more.png" width="305" height="54"></a></div>
		 </p>
      </div></td>
<?php
echo ("</tr>\n");
}
echo ("</table>\n");
}}
?>
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: PHP MYSQL - display images in 3 columns

Post by mecha_godzilla »

Hi,

The problem seems to be that you're not looping through the results array, so your script is only ever looking at the same row. You might be better to refactor this code to loop through the results array instead using either foreach() or while() and then include some code in that loop to build the table columns, rather than the other way round - running loops inside loops is also suboptimal from a performance perspective, which might become an issue if you're generating a lot of images all at the same time. Inside your array loop, you could just use a counter to determine when to generate the <td> start tag and then, when the maximum amount of images has been reached for that column, you can then generate the </td> end tag and reset the counter ready for the next column.

Because the number of images returned might not necessarily divide equally into the number of columns, you might also want to consider using something like the following code:

Code: Select all

$first_column_count = ceil((count($filearray) / 3));
$second_column_count = ceil((count($filearray) / 3));
$third_column_count = (count($filearray) - $first_column_count - $second_column_count);
There's probably a simpler way to do this, but normally three columns is the maximum that you'd want to display in a page so the code shouldn't become unmanageable. As an example of how this works, if your query returns 11 images then the columns will be populated as follows:

Column #1: 4 (11 / 3 = 3.667, which when automatically rounded up with ceil() will equal 4)
Column #2: 4 (11 / 3 = 3.667, which when automatically rounded up with ceil() will equal 4)
Column #3: 3 (11 - 4 - 4 = 3)

If you have an even number of columns then you can just use the modulus operator (%) to determine whether the number of images returned was odd or even.

HTH,

Mecha Godzilla
Post Reply