how do i get images to display in a rows like this using php and css?

Question

i wanted to know how can i display the images like the on in the picture: i know that i have to retrive the images using a while loop, but then displaying them like this is the difficult bit, thanks!! :))

Answer 1

It's really not that hard, you just have PHP output the HTML of the table.

Here's a quick example :

$imagenum=0;
echo "<table>";
while( $imagenum < $maximages){
  echo "<tr>";
  for ( $i = 0; $i < 4; $i += 1) {
    echo "<td>";
    if( $imagenum < $maximages){
     echo "<img src='";
     echo get_url_of_my_image($imagenum);
     echo "' >";
    }
    echo "</td>";
    $image+=1;
  }
  echo "</tr>";
}
echo "</table>";

Answer 2

Displaying the image is a matter of using the html <img> tag, and you can use the modulo operator % to know when you've displayed X images so you can close the existing row and open a new one.

$images ; //array of image urls
$countImages = count($images) ;

$imagesPerRow = 5 ;

for ($i = 0 ; $i < $countImages; $i++) {
    //display image here
    $image = $images[$i] ;
    echo "<img src='$image'>" ;

    if ($i % $imagesPerRow == 0) {
        //have displayed an entire row
        echo '<br>' ;
    }
}

Modulo returns the remainder of the division. So, lets say you want rows of 5 images. If $i is divided by 5 exactly then the remainder will be 0, which means 5 imageshave been shown so it's time for a new row.

Answer 3

Maybe this:

<UL>
  <LI CLASS="image">
    <IMG SRC="..." />
  </LI>
  <LI CLASS="image">
    <IMG SRC="..." />
  </LI>
  <LI CLASS="image">
    <IMG SRC="..." />
  </LI>
</UL>

With this CSS:

.image {
  display: inline;
}