HTML, PHP AND MYSQL pictures next to each other

Question

So let's say that I have a number of images on my server, uploaded by users. Each picture also has a row in the database containing information like filename, category, filesize, extension and location.

When I want to show these images I use a mysql_query and a while loop. This works, but the pictures all have different sizes and they show up next to each other or under each other which looks really bad.

Let's asume that I have 20 of these images, how can I show 5 images next to each other, 4 rows long???

Answer 1

Assuming a numerically indexed array of objects containing image data:

<div class="row">
<?php
// loop through all my images taking the index and image object
foreach( $images as $idx=>$image ) {

    // If this isn't the 1st image & the modulus of 5 and $idx is 0, make a new row.
    if( $idx > 0 && !(5%$idx) ) {
        </div><div class="row">
    }
    // Print out the image
    echo '<img src="' . $image->filename . '" />';
} ?>
</div>

The modulus is basically the remainder if you divide the first number by the second. Therefore when we've printed 5 images, 5/5=1 with no remainder, so we create a new row.

I believe that would create something like:

<div class="row">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
</div>
<div class="row">
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
<img src="img9.jpg" />
<img src="img10.jpg" />
</div>

Which could then be styled using CSS:

<style type="text/css">
    div.row {
       clear:left;
    }
    div.row img {
       float:left;
    }
</style>

When it comes to resizing the images, you have a 2 options:

1. The easy option: set the image width in the CSS (the height will scale accordingly). This is less than perfect and if the images are different aspect ratios (width vs. height), will still look messy.
2. Resize (and crop if necessary) using a PHP library such as GD or imagick (a PHP layer on top of imagemagick). Personally I prefer GD as it's packaged with PHP so it's got wider support. That said, imagick is quicker, simpler code, so it's up to you. This site gives a good comparison between the two for image resizing.

EDIT: in answer to your question, you'd need to do something like this to get the array of images:

<?php
// Build an array of images
$sql = 'SELECT * FROM images';
$result = mysql_query( $sql );

while( $obj = mysql_fetch_object( $result ) ) {
    $images[] = $obj;
}
?>

Answer 2

pseudocode

$i = 0;
while($row = mysql_fetch_object($result) {
   //displaying image
   ....
   if($i % 4 == 0) {
          echo '<BR>';
   }
   $i++;
}