Jump to content
servified

Creating dynamic grid table with images

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 by rwhite35

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.