Creating dynamic grid table with images

[servified]

First off, I am very new to php and I am learning the best I can. I am trying to display a dynamic grid style table within a loop and display my mysql data inside of it. The data is a Image URL, directory URL, URL description, and it prints all this data as an image with a link to the gallery.

 

The code works fine as... 5 wide x 5 down. It's supposed to look a little something like this:

[] [] [] [] []

[] [] [] [] []

[] [] [] [] []

[] [] [] [] []

[] [] [] [] []

 

Now that works, however when I change my rows and column variable # to 7 and 7 is when the problems start..

 

Here is my main code for this function:

//define variables
$uniqhash = "";
$modelname = "";
$email = "";
$galleryurl = "";
$gallerydesc = "";
$category = "";
$datesubmitted = "";
$gallerythumb = "";
$rows = 0;
$count = 0;
$columns = 0;

$select = "SELECT * From `models`";
$images_rows = mysqli_query($conn, $select);
$images = array();
if( empty( $images ) )
{
     echo 'Sorry, there was a fatal error in selecting images from database.';
}
while ($image = mysqli_fetch_assoc($images_rows)) {
   $images[] = $image;
}
echo '<table align="center" border="0"><tr>';

$size = sizeOf($images) - 1; //get count of array and put into $size
foreach($images as $image){
    if($rows == 7) { 
     echo '</tr><tr>'; // if our count is x wide, start a new row
        $rows = 0; 
    }
    if ($columns == 7){
        echo '</tr><tr>';
        $columns = 0;
    }
     echo "<td><a href=" . $image['galleryurl'] . " target=\"new\"><img src=" . $image['gallerythumb'] . " height=\"160\" width=\"160\" alt=\"" . $image['gallerydesc'] . "\"></a></td>";
        $rows++; 
        $count++; 
        $columns++;
     echo ($rows == 7 && $columns == 5 && $count != $size) ? '</tr>': ''; 
    }
echo '</tr></center></table>';

When I change $rows and $columns to 7 each it will display images like: (sample of 13 images)

[] [] [] [] []

[] [] 

[] [] []

[] [] [] []

 

I would like it to print x images across for $rows and x amount of rows for $columns in a grid like fashion.

 

If anyone can give me some help on this I would appreciate it...I have been desperately reading up on loops trying to figure it out but so far no luck.

P.S I am familiar with sanitizing all my data and that I need to implement this but I want to make sure my code functions first.

[rwhite35]

assuming $row_count holds the actual count, you want something like:

if ($i == $row_count) {
  echo "</tr><tr>";
  $row_count = $row_count + 7;
}

This is doing a couple things.  first it creates a counter ($i).  before you start your foreach loop, add this line:

$i=0;

once inside the foreach loop, your want to evaluate the if statement above.  If the increment count is is equal to the row_count, add a return.

 

Then to continue the incremental count, and still inside your foreach,  increment the counter by one, for each loop.   Put it all together, should look something like.

$row_count = 7;
$i=0;
foreach($images as $image){
   echo "<td><a href=" . $image['galleryurl'] . " target=\"new\"><img src=" . $image['gallerythumb'] . " height=\"160\" width=\"160\" alt=\"" . $image['gallerydesc'] . "\"></a></td>"; 

  if ($i == $row_count) {
    echo "</tr><tr>";
    $row_count = $row_count + 7;
  }
  $i++;
}

Note I've overloaded the variable $row_count, this way $row_count will have the value 7, 14, 21, 28 etc.. Give that a try.

Edited March 10, 2015 by rwhite35

[cyberRobot]

Have you considered using array_chunk() to break apart the table output?

http://php.net/manual/en/function.array-chunk.php

 

Here's a quick tutorial:

http://www.cyberscorpion.com/2013-08/build-html-tables-dynamically-with-php-part-2-simplify-with-array_chunk/

[jcbones]

If every image is the same size, you can set the style attribute to float:left, and it will auto size for the width of the parent division.