rupertbj Posted July 25, 2011 Share Posted July 25, 2011 I've been looking at the posts in this forum to create a grid of images. The code is below, but it created 4 columns of the images being pulled from the directory instead of displaying the photos in rows and columns. Any help much appreciated! <?php include("header.php"); ?> <?php //include("validate.php"); ?> <?php //$dir = "pictures"; if (!isset($_GET['pics'])){ print "PICS not defined"; $pics = "pictures"; } else{ //echo "pics is not empty"; $pics=$_GET['pics']; //echo "$pics"; } $dir=$_GET['pics']; $curDir = getcwd(); if(chdir($dir)) { $files = glob('*.{JPG,jpg}', GLOB_BRACE); usort( $files, create_function( '$a,$b', 'return filemtime($a) - filemtime($b);' ) ); chdir($curDir); foreach($files as $file) { // echo "<li>".date('Y-m-d H:i:s', filemtime("$dir/$file"))." - $file</li>\n"; // include("mysql.php"); print " <table width=80% align=center border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> <table width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> "; for ($y = 0; $y < 4; $y++) { echo ($x % 4 == 0) ? "</tr><tr>" : ""; echo "<td><a href='$dir/$file' rel=lightbox[group]><img src='$dir/$file' style='height:auto;width:20%;'></a></td>"; $x++; //} // <td width=100% valign=top align=left><a href=$dir/$file rel=lightbox[group]><img src=$dir/$file></a></td> print " </tr> </table> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> </table> "; } } else { echo "problem with image directory"; } ?> <?php include("footer.php"); ?> Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/ Share on other sites More sharing options...
phpSensei Posted July 25, 2011 Share Posted July 25, 2011 where is $x defined? echo ($x % 4 == 0) ? "</tr><tr>" : ""; Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246581 Share on other sites More sharing options...
rupertbj Posted July 25, 2011 Author Share Posted July 25, 2011 i was working from the following from another forum, posted by a moderator: echo "<table>"; echo "<tr>"; for ($y = 0; $y < 50; $y++) { echo ($x % 4 == 0) ? "</tr><tr>" : ""; echo "<td>" . $y . "</td>"; $x++; } echo "</tr>"; echo "</table>"; not sure how the $x works frankly, otherwise i wouldn't be having these problems. is $x not defined as $x % 4 == 0 ? Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246583 Share on other sites More sharing options...
phpSensei Posted July 25, 2011 Share Posted July 25, 2011 $x isn't defined anywhere, the $x is inside a ternary operation, it doesn't define the $x.. its like saying if(($x % 4) == 0){ // print td } try this <?php include("header.php"); ?> <?php //include("validate.php"); ?> <?php //$dir = "pictures"; if (!isset($_GET['pics'])){ print "PICS not defined"; $pics = "pictures"; } else{ //echo "pics is not empty"; $pics=$_GET['pics']; //echo "$pics"; } $dir=$_GET['pics']; $curDir = getcwd(); if(chdir($dir)) { $files = glob('*.{JPG,jpg}', GLOB_BRACE); usort( $files, create_function( '$a,$b', 'return filemtime($a) - filemtime($b);' ) ); chdir($curDir); foreach($files as $file) { // echo "<li>".date('Y-m-d H:i:s', filemtime("$dir/$file"))." - $file</li>\n"; // include("mysql.php"); print " <table width=80% align=center border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> <table width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> "; $x=1; for ($y = 0; $y <= 4; $y++) { echo (($x % 4) == 0) ? "</tr><tr>" : ""; echo "<td><a href='$dir/$file' rel=lightbox[group]><img src='$dir/$file' style='height:auto;width:20%;'></a></td>"; $x++; //} // <td width=100% valign=top align=left><a href=$dir/$file rel=lightbox[group]><img src=$dir/$file></a></td> print " </tr> </table> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> </table> "; } } else { echo "problem with image directory"; } ?> <?php include("footer.php"); ?> Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246585 Share on other sites More sharing options...
rupertbj Posted July 25, 2011 Author Share Posted July 25, 2011 Hmmm... still end up with the same result (i.e. 4 columns of duplicate images in each row). What is the best way to make a grid of images? Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246594 Share on other sites More sharing options...
phpSensei Posted July 25, 2011 Share Posted July 25, 2011 Hmmm... still end up with the same result (i.e. 4 columns of duplicate images in each row). What is the best way to make a grid of images? Heres an example <?php $list=array(1,2,3,4,'apple',5,6,7,'poop',8,9,10); $cols = 0; $max_cols = 3; for($i=0;$i<=count($list);$i++){ print $i . ' '; if($cols > $max_cols){ $cols = 0; print '<br />'; }else{ $cols++; } } ?> Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246597 Share on other sites More sharing options...
Psycho Posted July 25, 2011 Share Posted July 25, 2011 Here's a rewrite in a more logic fashion. Not tested, but it should work. <?php $MAX_COLS = 4; include("header.php"); //include("validate.php"); //$dir = "pictures"; //Get selected directory or use default $dir = (isset($_GET['pics'])) ? $_GET['pics'] : "pictures"; //Change working directory $curDir = getcwd(); $changeDir = chdir($dir); if(!$changeDir) { echo "problem with image directory"; } else { $files = glob('*.{JPG,jpg}', GLOB_BRACE); usort( $files, create_function( '$a,$b', 'return filemtime($a) - filemtime($b);' ) ); chdir($curDir); $picNo = 0; $tableOutput = ''; foreach($files as $file) { $picNo++; //Open new row if($picNo%$MAX_COLS==1) { $tableOutput .= "<tr>\n"; } //Create the image TD echo "<td><a href='$dir/$file' rel=lightbox[group]><img src='$dir/$file' style='height:auto;width:20%;'></a></td>\n"; //Close current row if($picNo%$MAX_COLS==0) { $tableOutput .= "</tr>\n"; } } //Clsoe last row if needed if($picNo%$MAX_COLS!=0) { $tableOutput .= "</tr>\n"; } print " <table width=80% align=center border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> <table width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> {$tableOutput} </table> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> </table>"; } include("footer.php"); ?> Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246616 Share on other sites More sharing options...
rupertbj Posted July 25, 2011 Author Share Posted July 25, 2011 @phpSensi - thanks for your input... still trying to work it out for myself with your examples... struggling though! I can make the numbers in the count appear correctly, but transforming that into rows of images is beyond me at this point. @mjdamato - thanks for that... that solves many problems, but now i'm struggling to format it... it doesn't seem to confirm to my tables and now is just a row of photos, rather than rows and columns with 4 columns max?! this is the adjusted code: <?php $MAX_COLS = 4; include("header.php"); //include("validate.php"); //$dir = "pictures"; print " <table width=80% align=center border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> <table width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> "; //Get selected directory or use default $dir = (isset($_GET['pics'])) ? $_GET['pics'] : "pictures"; //Change working directory $curDir = getcwd(); $changeDir = chdir($dir); if(!$changeDir) { echo "problem with image directory"; } else { $files = glob('*.{JPG,jpg}', GLOB_BRACE); usort( $files, create_function( '$a,$b', 'return filemtime($a) - filemtime($b);' ) ); chdir($curDir); $picNo = 0; $tableOutput = ''; foreach($files as $file) { $picNo++; //Open new row if($picNo%$MAX_COLS==1) { $tableOutput .= "<tr>\n"; } //Create the image TD echo "<td><a href='$dir/$file' rel=lightbox[group]><img src='$dir/$file' style='height:100;width:auto;'></a></td>\n"; //Close current row if($picNo%$MAX_COLS==0) { $tableOutput .= "</tr>\n"; } } //Clsoe last row if needed if($picNo%$MAX_COLS!=0) { $tableOutput .= "</tr>\n"; } print " {$tableOutput} "; } print " </tr> </table> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> </table> "; include("footer.php"); ?> Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246622 Share on other sites More sharing options...
phpSensei Posted July 25, 2011 Share Posted July 25, 2011 OP I cleaned up everything in your code... DAMN it was messy, i rearranged your tables too Try This! <?php include("header.php"); $max_cols = 4; $cols = 0; if (!isset($_GET['pics'])){ print "PICS not defined"; $pics = "pictures"; }else{ $pics=$_GET['pics'];} $dir=$_GET['pics']; $curDir = getcwd(); if(chdir($dir)) { $files = glob('*.{JPG,jpg}', GLOB_BRACE); usort($files, create_function( '$a,$b', 'return filemtime($a) - filemtime($b);' )); chdir($curDir); print " <table width=80% align=center border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%><table width=38% height="115" border=0 cellpadding=0 cellspacing=4 bgcolor=#FFFFFF>"; foreach($files as $file) { if($cols > $max_cols){ print '<tr>'; } print"<td><a href='$dir/$file' rel=lightbox[group]><img src='$dir/$file' style='height:auto;width:20%;'></a></td>"; if($cols > $max_cols){ print '</tr>'; $max_cols = 0; } $cols ++; } print" </table></td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> </table>"; } else { echo "problem with image directory"; } // Validated by your friendly Sensei... PHPsensei ?> <?php include("footer.php"); ?> Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246628 Share on other sites More sharing options...
rupertbj Posted July 25, 2011 Author Share Posted July 25, 2011 @phpSensi - thanks a lot for looking at the code... yes, definitely needed a clean-up! Problem is that now i'm back to having a single column of images? Not sure why though, but should have enough here to figure it out... hopefully!! Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246639 Share on other sites More sharing options...
phpSensei Posted July 25, 2011 Share Posted July 25, 2011 @phpSensi - thanks a lot for looking at the code... yes, definitely needed a clean-up! Problem is that now i'm back to having a single column of images? Not sure why though, but should have enough here to figure it out... hopefully!! do a count on this variable $files, it should return how many elements (items) are in the array print count($files) Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246645 Share on other sites More sharing options...
rupertbj Posted July 25, 2011 Author Share Posted July 25, 2011 It returns the correct number of images in the array. The result looks like: http://www.rupstar.com/list_pictures.php?pics=pictures/20101118 any ideas? Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246651 Share on other sites More sharing options...
Psycho Posted July 25, 2011 Share Posted July 25, 2011 OK, rather than confuse this thread with two different solutions. I made modifications to phpSensei's code. Although, I have to say, when presenting records in rows/columns you should be using the modulus operator ('%') not doing a greater than or less than comparison. Give this a try: <?php include("header.php"); $max_cols = 4; if (!isset($_GET['pics'])) { print "PICS not defined"; $pics = "pictures"; } else { $pics=$_GET['pics']; } $dir = $_GET['pics']; $curDir = getcwd(); if(chdir($dir)) { $files = glob('*.{JPG,jpg}', GLOB_BRACE); usort($files, create_function( '$a,$b', 'return filemtime($a) - filemtime($b);' )); chdir($curDir); $fileCount = 0; $output = ''; foreach($files as $file) { $fileCount++; if($fileCount%$max_cols==1) { $output .= "<tr>\n"; } $output .= "<td><a href='$dir/$file' rel=lightbox[group]><img src='$dir/$file' style='height:auto;width:20%;'></a></td>"; if($fileCount%$max_cols==0) { $output .= "</tr>\n"; } } if($fileCount%$max_cols!=0) { $output .= "</tr>\n"; } print " <table width=80% align=center border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> <table width=38% height=\"115\" border=\"0\" cellpadding=\"\"0 cellspacing=\"4\" bgcolor=\"#FFFFFF\"> {$output} </table> </td> <td width=10%> </td> </tr> <tr> <td width=10%> </td> <td width=80%> </td> <td width=10%> </td> </tr> </table>"; } else { echo "problem with image directory"; } include("footer.php"); ?> Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246785 Share on other sites More sharing options...
rupertbj Posted July 25, 2011 Author Share Posted July 25, 2011 Guys - thanks so much... working perfectly now! Link to comment https://forums.phpfreaks.com/topic/242702-creating-a-grid-of-images/#findComment-1246801 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.