Invision Power Services > Can someone help fix this PHP code to display images?

Full Version: Can someone help fix this PHP code to display images?

Invision Power Services > Community Forums > Community Web Design and Coding

Lemon Head

Jul 11 2005, 07:47 PM

Hi all,

Info: Some of the images which are available by using the links providing are from a TV series and may be contain scenes of a violent nature.

I've modified a free script that displays all images in the folder in which the script appears. I'm trying to get it to display a table with 5 clickable thumbnail images that take you to the picture you clicked on. The table should display in rows of 5. I got the original script working and made a script that displays a clickable thumbnail of an image. However I'm having a job combining the two.

Here's the code so far:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Millennium Image Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<?php

/* This script displays all the images in the current directory. Written
* by Sander Spek <s@sander-s.net>. This script has been copylefted, and
* falls under the GNU General Public License
* <http://www.gnu.org/copyleft/gpl.html>.
*/

// The RegExp for finding images.
$fileregex = "[jpg|jpeg|png|gif]";

// We use the current folder.
$all = opendir('.');

// Create the array containing the image references.
$photos = array();

// Fill the array:
while ($file = readdir($all)) {
   if (!is_dir($location.'/'.$file) and $file <> ".." and $file <> ".") {
      if (preg_match($fileregex,$file)) {
         array_push($photos,$file);
      }
   }
}

// Let's see how many image references we retrieved.
$arlength = count($photos);
echo "Contents: ".$arlength;

// And finally, let's display our stuff.
echo "<table width='95%'  border='0' cellspacing='1' cellpadding='1'><tr>\n";
for ($i=0; $i<$arlength; $i++) {
echo '<td><a href="'.$photos[$i].'" border ='0'><img src="'.$photos[$i].'" border ='0'
      width='150' height='100'></a></td>";
   }

echo '</tr></table>';

?>

You can see it run or rather try to here:
http://www.millenniumdesktop.co.uk/cmeacg/...ageLinksgps.php

I'm getting a parse error that reads "Parse error: parse error, unexpected T_LNUMBER, expecting ',' or ';' in /home/jackal/public_html/cmeacg/img/stills/s1/pilot/TestImageLinksgps.php on line 43"

Also, when it was working, the table had ALL the images within the folder displayed in 1 long row. How can I make it that it displays them in rows of 5 maximum?

I'd be grateful for some help!
Gra.

Joshua Jones

Jul 11 2005, 08:12 PM

try this

CODE

echo '<td><a href=\"'.$photos[$i].'\" border ='0'><img src=\"'.$photos[$i].'\" border ='0' width='150' height='100'></a></td>';

inplace of

CODE

echo '<td><a href="'.$photos[$i].'" border ='0'><img src="'.$photos[$i].'" border ='0'
width='150' height='100'></a></td>";

Not sure if it matters but you start with a ' and end with " . Plus if you use " In an already quoted line you have to use \ to define it, IIRC.

Frankl.in

Jul 11 2005, 09:20 PM

QUOTE(homchz @ Jul 11 2005, 10:12 PM)

try this

CODE

echo '<td><a href=\"'.$photos[$i].'\" border ='0'><img src=\"'.$photos[$i].'\" border ='0' width='150' height='100'></a></td>';

That would make it worse!

Try this instead:

CODE

echo '<td><a href="'.$photos[$i].'" border="0"><img src="'.$photos[$i].'" border="0" width="150" height="100"></a></td>';

Or if you love escapes:

CODE

echo '<td><a href="'.$photos[$i].'" border=\'0\'><img src="'.$photos[$i].'" border=\'0\' width=\'150\' height=\'100\'></a></td>';

More info about strings @ http://www.zend.com/manual/language.types.string.php

Lemon Head

Jul 12 2005, 09:49 AM

QUOTE(Franklin @ Jul 11 2005, 10:20 PM)

That would make it worse!

Try this instead:

CODE

echo '<td><a href="'.$photos[$i].'" border="0"><img src="'.$photos[$i].'" border="0" width="150" height="100"></a></td>';

Hi,
Thanks for the assistance guys, much appreciated, also thanks for the link which I'll go check out.
I used this code above and it works great except it displays every image in the directory in one long row (good if I put it in an iFrame perhaps as a filmstrip) as opposed to say multiple rows of 5 (like a grid pattern) or whatever amount I want to set. This way, it doesn't matter how many images are in the folder where the script resides, it will always display them all in a neat grid. Ideally I would like to make it display say 5 by 5 images per page. I realise this is stretching your goodwill but I need help!

Also, is it possible to display just the first 5 images from the directory or perhaps 5 random images from whatever is in the directory? I know PHP can pick random numbers etc.

Starnox

Jul 12 2005, 09:56 AM

I made a lovely script like that for my photography site, some of you may remember delaune.co.uk o.O Anyway you just dumped the photos in the folder and it created thumbnails, split them up into pages and rows. All the things you want yours to do. However I somehow lost the php file in my backups - I have all the graphics still... which really isn't much help

I an really annoyed cos I want it back

Lemon Head

Jul 12 2005, 10:11 AM

This sounds like what I was after trying to create.
I'll be using this script to hopefully display episode stills within an episode guide (up to 100 or so images for each episode). Therefore I want to make it so that it displays 5 or 6 thumbs in a row and will display x amount of rows per page. I thought if I put it inside an iframe on the episode's page, a visitor would be able to flip between the image pages whilst still in the main page.

Starnox

Jul 12 2005, 10:43 AM

QUOTE(Lemon Head @ Jul 12 2005, 11:11 AM)

CODE

$rows = 0;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'" border ='0'><img src="'.$photos[$i].'" border ='0' width='150' height='100'></a></td>";

if(isint("$i/5")){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

Hopefully that will split it up into rows of five and fill the gaps at the end. As for pages it gets a we bit more complicated. You got an online version for us to see?

Lemon Head

Jul 12 2005, 10:58 AM

Great! Thanks! yes, the link is here.
I'll try this code and save it as a new page. obviously I'll be formating it with CSS when its all working!

I uploaded it to here but I get an error.

QUOTE

Parse error: parse error, unexpected T_LNUMBER, expecting ',' or ';' in /home/jackal/public_html/cmeacg/img/stills/s1/pilot/TestImageLinksRows.php on line 46

Starnox

Jul 12 2005, 11:04 AM

QUOTE(Lemon Head @ Jul 12 2005, 11:58 AM)

Great! Thanks! yes, the link is here.
I'll try this code and save it as a new page. obviously I'll be formating it with CSS when its all working!

I uploaded it to here but I get an error.

Mind posting the code so we can see where line 46 is?

Edit: Sorry, was using franklins code, but IPB took out the /'s

CODE

$rows = 0;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'"><img src="'.$photos[$i].'" border ="0" width="150" height="100"></a></td>';

if(is_int("$i/5")){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

Edit 2 changed isint to is_int

Lemon Head

Jul 12 2005, 11:14 AM

Thanks!

Here's the code so far:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Millennium Image Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<?php

/* This script displays all the images in the current directory. Written
* by Sander Spek <s@sander-s.net>. This script has been copylefted, and
* falls under the GNU General Public License
* <http://www.gnu.org/copyleft/gpl.html>.
*/

// The RegExp for finding images.
$fileregex = "[jpg|jpeg|png|gif]";

// We use the current folder.
$all = opendir('.');

// Create the array containing the image references.
$photos = array();

// Fill the array:
while ($file = readdir($all)) {
   if (!is_dir($location.'/'.$file) and $file <> ".." and $file <> ".") {
      if (preg_match($fileregex,$file)) {
         array_push($photos,$file);
      }
   }
}

// Let's see how many image references we retrieved.
$arlength = count($photos);
echo "Contents: ".$arlength;
$rows = 0;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'"><img src="'.$photos[$i].'" border ="0" width="150" height="100"></a></td>';

if(is_int("$i/5")){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

?>
</body>
</html>

ImageswithRows

Just seen Edit 2 - code above now corrected

Starnox

Jul 12 2005, 11:15 AM

See edit 2 in post above

Lemon Head

Jul 12 2005, 11:17 AM

Aha, real time assistance! Thanks Starnox!

edit no 2 fixed it but its still in one row. Do I have to change $rows to say 5?

Starnox

Jul 12 2005, 11:21 AM

CODE

if(is_int($i/5)){ echo '</tr><tr>'; $rows++; }

try that instead

Lemon Head

Jul 12 2005, 11:25 AM

Done and done! That looks more like it!

This could be me editing the code, here's the current version:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Millennium Image Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<?php

/* This script displays all the images in the current directory. Written
* by Sander Spek <s@sander-s.net>. This script has been copylefted, and
* falls under the GNU General Public License
* <http://www.gnu.org/copyleft/gpl.html>.
*/

// The RegExp for finding images.
$fileregex = "[jpg|jpeg|png|gif]";

// We use the current folder.
$all = opendir('.');

// Create the array containing the image references.
$photos = array();

// Fill the array:
while ($file = readdir($all)) {
   if (!is_dir($location.'/'.$file) and $file <> ".." and $file <> ".") {
      if (preg_match($fileregex,$file)) {
         array_push($photos,$file);
      }
   }
}

// Let's see how many image references we retrieved.
$arlength = count($photos);
echo "Contents: ".$arlength;
$rows = 0;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'"><img src="'.$photos[$i].'" border ="0" width="150" height="100"></a></td>';

if(is_int($i/5)){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

?>
</body>
</html>

Starnox

Jul 12 2005, 11:25 AM

CODE

if(is_int($i/5) && !($i == "0")){ echo '</tr><tr>'; $rows++; }

Fingers crossed this is the last edit

Edit: and change $rows = 1;

Lemon Head

Jul 12 2005, 11:31 AM

QUOTE(Starnox @ Jul 12 2005, 12:25 PM)

Edit: at change $rows = 1;

Lost me there!

It works!

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Millennium Image Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<?php

/* This script displays all the images in the current directory. Written
* by Sander Spek <s@sander-s.net>. This script has been copylefted, and
* falls under the GNU General Public License
* <http://www.gnu.org/copyleft/gpl.html>.
*/

// The RegExp for finding images.
$fileregex = "[jpg|jpeg|png|gif]";

// We use the current folder.
$all = opendir('.');

// Create the array containing the image references.
$photos = array();

// Fill the array:
while ($file = readdir($all)) {
   if (!is_dir($location.'/'.$file) and $file <> ".." and $file <> ".") {
      if (preg_match($fileregex,$file)) {
         array_push($photos,$file);
      }
   }
}

// Let's see how many image references we retrieved.
$arlength = count($photos);
echo "Contents: ".$arlength;
$rows = 0;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'"><img src="'.$photos[$i].'" border ="0" width="150" height="100"></a></td>';

if(is_int($i/5) && !($i == "0")){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

?>
</body>
</html>

When you said "Edit: at change $rows = 1;" do I have to make a further change?

Starnox

Jul 12 2005, 11:35 AM

Sorry typo I meant and

RRR i forgot ints started at 0

CODE

for ($i=1; $i<=$arlength; $i++) {

But then this will screw up your image names as well... humf

Edit: Yes you have to change $rows = 1; where $rows = 0;

And no it doesn't work since the first line has 6 and the last one only has 4.

Lemon Head

Jul 12 2005, 11:35 AM

I edited $rows to 1 instead of 0 and when I look at the script now, it still works but 2 blank images appear then dissapear. if the value is set at 0 this doesn't happen. Which do you recommend?

Starnox

Jul 12 2005, 11:39 AM

Ok leave it as 0 then.

As you may have guessed my method of coding is trial and error

CODE

for ($i=1; $i<=$arlength; $i++) {

should work but you will have to change the numbers of your images, starting them from 001

Lemon Head

Jul 12 2005, 11:42 AM

That's excellent! Thank you very much for your help.
It occurred to me that what I could do is limit the images say to 3 rows or whatever and then give the site visitor an option to "Click here to view all images". This would negate the issue of some folders have loads of far to many images to display and needing page links.

Starnox

Jul 12 2005, 11:45 AM

Yeah you could do that.

Lemon Head

Jul 12 2005, 11:47 AM

Current code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Millennium Image Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<?php

/* This script displays all the images in the current directory. Written
* by Sander Spek <s@sander-s.net>. This script has been copylefted, and
* falls under the GNU General Public License
* <http://www.gnu.org/copyleft/gpl.html>.
*/

// The RegExp for finding images.
$fileregex = "[jpg|jpeg|png|gif]";

// We use the current folder.
$all = opendir('.');

// Create the array containing the image references.
$photos = array();

// Fill the array:
while ($file = readdir($all)) {
   if (!is_dir($location.'/'.$file) and $file <> ".." and $file <> ".") {
      if (preg_match($fileregex,$file)) {
         array_push($photos,$file);
      }
   }
}

// Let's see how many image references we retrieved.
$arlength = count($photos);
echo "Contents: ".$arlength;
$rows = 0;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'"><img src="'.$photos[$i].'" border ="0" width="150" height="100"></a></td>';

if(is_int($i/5) && !($i == "0")){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

?>
</body>
</html>

Starnox

Jul 12 2005, 12:00 PM

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Millennium Image Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<?php

/* This script displays all the images in the current directory. Written
* by Sander Spek <s@sander-s.net>. This script has been copylefted, and
* falls under the GNU General Public License
* <http://www.gnu.org/copyleft/gpl.html>.
*/

// The RegExp for finding images.
$fileregex = "[jpg|jpeg|png|gif]";

// We use the current folder.
$all = opendir('.');

// Create the array containing the image references.
$photos = array();

// Fill the array:
while ($file = readdir($all)) {
if (!is_dir($location.'/'.$file) and $file <> ".." and $file <> ".") {
if (preg_match($fileregex,$file)) {
array_push($photos,$file);
}
}
}

// Let's see how many image references we retrieved.
$arlength = count($photos);
echo "Contents: ".$arlength;
$rows = 1;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'"><img src="'.$photos[$i].'" border ="0" width="150" height="100"></a></td>';

if(is_int(($i+1)/5)){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

?>
</body>
</html>

Try that baby

Lemon Head

Jul 12 2005, 12:08 PM

Ok! I replaced the whole code with it (backed up first!) but it doesn't seem to do anything. I closed and reopened the window but nothing appears.

Also, I uploaded the rest of the images into this folder.

Starnox

Jul 12 2005, 12:10 PM

Ok edited the code above, put an = instead of a +

, made an infinate loop o.O

Lemon Head

Jul 12 2005, 12:14 PM

LOL! Okay! The fact that you understand this so easily is really quite disturbing!

That's much better! The first row was displaying 6 instead of 5 but this has now fixed it. You are a genius mate!

Starnox

Jul 12 2005, 12:15 PM

QUOTE(Lemon Head @ Jul 12 2005, 01:14 PM)

LOL! Okay! The fact that you understand this so easily is really quite disturbing!

That's much better! The first row was displaying 6 instead of 5 but this has now fixed it. You are a genius mate!

No problem, glad I could help - and its kept me busy

Lemon Head

Jul 12 2005, 12:24 PM

I just realised something! It is displaying all 130 images which are in the folder, but they are all jiggled up! (If you move your cursor over the images, you'll see the filenames at the bottom of your browser.)

0 1 2 3 4
5 12 11 10 9
7 8 6 129 127
128 126 125 124 123
122 121 120 119 118
117 116 115 114 113
and so on to ...
22 21 20 19 18
17 16 15 14 13

Do you have any idea why? Is this a limitation on the way PHP scans the directory?

Starnox

Jul 12 2005, 12:27 PM

CODE

asort($photos);

Put that above: // Let's see how many image references we retrieved.

Lemon Head

Jul 12 2005, 12:44 PM

Ok.

Current code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Millennium Image Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../../../css/cmeacg.css" rel="stylesheet" type="text/css" />
</head>

<body>

<?php

/* This script displays all the images in the current directory. Written
* by Sander Spek <s@sander-s.net>. This script has been copylefted, and
* falls under the GNU General Public License
* <http://www.gnu.org/copyleft/gpl.html>.
*/

// The RegExp for finding images.
$fileregex = "[jpg|jpeg|png|gif]";

// We use the current folder.
$all = opendir('.');

// Create the array containing the image references.
$photos = array();

// Fill the array:
while ($file = readdir($all)) {
if (!is_dir($location.'/'.$file) and $file <> ".." and $file <> ".") {
if (preg_match($fileregex,$file)) {
array_push($photos,$file);
}
}
}
asort($photos);
// Let's see how many image references we retrieved.
$arlength = count($photos);
echo "Contents: ".$arlength;
$rows = 1;

// And finally, let's display our stuff.
echo "<table width='95%' border='0' cellspacing='1' cellpadding='1'><tr>\n";

for ($i=0; $i<$arlength; $i++) {

echo '<td><a href="'.$photos[$i].'"><img src="'.$photos[$i].'" border ="0" width="150" height="100"></a></td>';

if(is_int(($i+1)/5)){ echo '</tr><tr>'; $rows++; }

}

$left = ($rows*5)-$arlength;

for($l=0; $l<$left; $l++){

echo '<td><img src="blankimage.jpg" border="0" width="150" height="100"></td>';

}

echo '</tr></table>';

?>
</body>
</html>

It is definitley pulling all of the images as I've counted them.

Starnox

Jul 12 2005, 01:15 PM

Did it not solve the problem?

Lemon Head

Jul 12 2005, 03:37 PM

Hi,
Sorry Starnox, no it didn't make any difference. I've updated the patern of the image (see above post) so you can see the order they are being incorrectly shown. I don't know why, I've checked the the files via FTP, there is nothing to point why yet they always appear in the same order, allbeit in the wrong order.
You can see the files here.
This is the current php file to display them here.

This makes a difference because the depictions in the images need to follow in the logical order they were taken. At the moment, scenes from the end of the episode are near the beginning if you see what I mean.

Lemon Head

Jul 12 2005, 04:00 PM

This is odd! I have uploaded a second batch of images into a second folder together with the script as it is and it seems to be fine, all images are in order. I'll try uploading the first lot again to see what happens. The filenames are in the same manner though. You can see them here

Lemon Head

Jul 12 2005, 04:18 PM

Well, what do you know! Uploading the images again has fixed the order in which they are displayed!

May I be cheeky and ask is it possible to modify the script so that it only displays the first 10 images?
Then I can add a "Click here to see full list of images." type link.

Starnox

Jul 12 2005, 04:32 PM

Thats because the default read order is done by creation date or something similar. asort should have sorted the problem. Maybe it needed to go up a bit further.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.