Jump to content

Creating a grid of images?

rupertbj

By rupertbj
in PHP Coding Help

 Share

Recommended Posts

rupertbj Newbie

rupertbj

Posted
Posted

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
rupertbj Newbie

rupertbj

Posted
  • Author
Posted

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

?

phpSensei Advanced Member

phpSensei

Posted
Posted

$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"); ?>

 

phpSensei Advanced Member

phpSensei

Posted
Posted

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++;

           }
}
?>

Psycho Prolific Member

Psycho

Posted
Posted

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");

?>

rupertbj Newbie

rupertbj

Posted
  • Author
Posted

@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");

?>

phpSensei Advanced Member

phpSensei

Posted
Posted

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"); ?>

phpSensei Advanced Member

phpSensei

Posted
Posted

@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)

Psycho Prolific Member

Psycho

Posted
Posted

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");

?>

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

×
 Share
Go to topic listing
×
×
  • 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.