PHP Help

[BrianG]

Hopefully there'll be a couple PHP guys here who can give me a hand.

I house all my forum posting pictures on my webserver, and finding a picture used to require me to open an FTP connection and go through them to find the one I want. So, I created a simple PHP script page that is a gallery of sorts. It works OK, but there are a couple of problems:

1. Speed. Currently, I just list all the images I have by using PHP to automatically get a directory listing of all PNG, GIF, and JPG files stored. But it seems to be quite slow doing this. Is the filesystem object supposed to be that slow? My code is the following:
   
   At the top of the page:
   
   

   <?php
   
   $imgdir = '.';
   
   $allowed_types = array('png','jpg','gif');
   
   $dimg = opendir($imgdir);
   
   while($imgfile = readdir($dimg)){
   	if(in_array(strtolower(substr($imgfile,-3)),$allowed_types)){
   		$a_img[] = $imgfile;
   		sort($a_img);
   		reset ($a_img);
   	}
   }
   
   $totimg = count($a_img); // total image number
   
   ?>

   and then, where the image listing is to be shown:
   
   

   <?php
   
   for($x=0; $x<$totimg; $x++){
   	$size = getimagesize($imgdir.'/'.$a_img[$x]);
   	echo "\t".'<tr valign="top" align="left">'."\n\r";
   	echo "\t\t".'<td width="35"><b>'.($x+1).'.</b></td>'."\n\r";
   	echo "\t\t".'<td><a href="javascript:void(0)" onmouseover="showPic(this,\''.$imgdir.'/'.$a_img[$x].'\','.$size[0].','.$size[1].')">'.$a_img[$x].'</a></td>'."\n\r";;
   	echo "\t\t".'<td>'.$size[0].'x'.$size[1].'</td>'."\n\r";
   	echo "\t\t".'<td align="right">'.round(filesize($imgdir.'/'.$a_img[$x])/1000,1).'KB</td>'."\n\r";
   	echo "\t".'</tr>'."\n\r";
   }
   
   ?>

   Is there a way I can improve the speed?
   
   
2. Thumbnail images. Currently, no images are initially shown, but show up when I hover over a link. Ideally, to speed loading time, I'd like to show a thumbnail image. Right now, I just geometrically resize the image just so it fits nicely in the window (this window contains a link to view the full-size version), but the filesize can be large and therefore a delay while it downloads. I could use client-side script to preload those images, but it wouldn't have time to do its job because I tend to start hunting for the image I want right away. Not to mention the bandwidth required to load unnecessary images.
   
   I tried using some PHP code to automatically generate thumbnail images for the files in a directory, but it tends to stop making them after a random image, and it also won't create thumbnails of GIF or PNG files - it just skips those. It does work to a degree because some are generated, so the necessary graphics object IS present and works. And PHP doesn't throw any errors, it just stops generating the files. And since it stops generating the thumbnails on random images, it's not a matter of an unsupported image type, corrupt image, or whatever. Any idea why, or how I could debug to find out?

[BrianG]

41 views and no one knows? C'mon guys, help me out here.

[What's_nitro?]

I don't know much (anything?) about programming, but would it help to run a seperate iteration of the code for each file type- PNG, JPEG, GIF, etc., and generate a file list/thumbnails for each type before moving on to the next? Maybe the code is getting confused somehow by having to sort through and switch between the different types in one iteration.

[BrianG]

Well, the scripts creates an array of all files in one shot ($dimg = opendir($imgdir);), which is really where I think the delay is happening. The script then loops through this array, and if the current file has an extension that matches one in the $allowed_types array, it adds that file to a final array ($a_img[]).

Running a seperate loop for each type would actually take longer. The only thing I could do differently is save the sorting until the loop is finished.

Thanks for the thoughts though!

[What's_nitro?]

So can you make it sort on-the-fly? Or can you run more than one instance of the code at a time?

[BrianG]

I assume the initial file list array is sorted however the files appear on the server (could be by filename, file size, modified date, etc). Currently, the sorting (by filename) is done everytime a file is added to the final array, but would probably be better if done at the end once all filenames are in the final array (after the loop is complete).

I'm not sure how or why I would run more than one instance of any of the code. It's pretty linear right now...

[What's_nitro?]

I agree if all the sorting was done at the very end that would save lots of time as opposed to doing it each time a file is found and added to the list.

Maybe I'm overcomplicating things with multiple instances of code, but if you had one instance per file type, then compiled them into one list at the end, then sorted them however, would that improve performance?

[kraegar]

I don't know PHP, but I dabble in Perl... and PHP is a perl derivative, so I can read what you put in. I don't know of a way to speed it up, looks pretty straightforward to me.

For the thumbnails not showing up until you mouse-over, that's HTML, not PHP that's biting you. Or really, Javascript. The "onmouseover" part needs to go. I don't know javascript to tell you how to replace it, though.

As for why it's stopping part way through, I can't see a reason. Is it always in the same spot?

Sorry I can't dig in more, I'm working atm :)
Tony

[kraegar]

Oh, and you can definitely just put the sort($a_img) after the loop. There's no reason for it to be in the loop.

[Arct1k]

Why not browse dir using explorer?

[BrianG]

Originally Posted by kraegar

...For the thumbnails not showing up until you mouse-over, that's HTML, not PHP that's biting you. Or really, Javascript. The "onmouseover" part needs to go. I don't know javascript to tell you how to replace it, though.

As for why it's stopping part way through, I can't see a reason. Is it always in the same spot?

Sorry I can't dig in more, I'm working atm :)
Tony

The onmouseover event is there because I can't get the auto-thumbnail generation to work consistently on the server. Therefore, any "thumbnails" would be simply resized images, but their file size (and therefore download time) time would not change. Showing the image only on mouseover means the page doesn't have to download images that I don't care about until I get to the image I want to see. Just a speed optimization really.

Originally Posted by kraegar

Oh, and you can definitely just put the sort($a_img) after the loop. There's no reason for it to be in the loop.

I put the sort code outside the loop, but it didn't do anything to help the speed, well, not noticeably anyway. I'm sure there is some time savings, but it's probably measured in milli-seconds.

When I took a closer look, I see that the PHP that writes the file count to the page happens after the looping, but that part is displayed right away. I can then assume that the loop and sort is not the cause of the delay or the image count at the top would be delayed as well.

So, I looked at the loop which writes the HTML to the page instead. In client-side JScript, many multiple calls to the document.write() method (which is similar to the PHP echo method) tends to be very slow. In Jscript, an easy way to speed document writing is to create a string variable, concatenate the string in the loop (creates a very large string), and then use one "document.write()" call to write that whole string to the page at once. So, I used this methodology in PHP and it seems to have speeded up things by a factor of at least 5.

There is a disadvantage to doing this though. When you use multiple write calls (document.write() in jscript, or echo in php) you see each line appear as the server writes it to the page. If you use the concatenate scheme, it IS much faster, but you only see the full page content when all the text is compiled. Not a big deal in this specific page since there are relatively few lines to work with, but if the page is huge, you'd see a blank page until the server was done processing. A way to combine the best of both worlds would be to use the concatenate scheme to compile all the text in each iteration of the loop, and just use one echo call at the end of that iteration.

Originally Posted by Arct1k

Why not browse dir using explorer?

That won't work because I shut off directory browsing on my server (for valid reasons). I could also use FTP via Explorer, but then I'd have to remember my FTP login/password wherever I happened to be, and the account info is somewhat cryptic and difficult to remember. Either way, those would just show the file names, not the image associated with them.

[What's_nitro?]

So what does the PHP code look like now?

[BrianG]

At the top of the page:

<?php

$imgdir = '.';

$allowed_types = array('png','jpg','gif');

$dimg = opendir($imgdir);

while($imgfile = readdir($dimg)){
	if(in_array(strtolower(substr($imgfile,-3)),$allowed_types)){
		$a_img[] = $imgfile;
	}
}

sort($a_img);
reset ($a_img);

$totimg = count($a_img); // total image number

?>

and then, where the image listing is to be shown:

<?php

for($x=0; $x<$totimg; $x++){
	$t="";
	$size = getimagesize($imgdir.'/'.$a_img[$x]);
	$t=$t.+"\t".'<tr valign="top" align="left">'."\n\r";
	$t=$t.+"\t\t".'<td width="35"><b>'.($x+1).'.</b></td>'."\n\r";
	$t=$t.+"\t\t".'<td><a href="javascript:void(0)" onmouseover="showPic(this,\''.$imgdir.'/'.$a_img[$x].'\','.$size[0].','.$size[1].')">'.$a_img[$x].'</a></td>'."\n\r";;
	$t=$t.+"\t\t".'<td>'.$size[0].'x'.$size[1].'</td>'."\n\r";
	$t=$t.+"\t\t".'<td align="right">'.round(filesize($imgdir.'/'.$a_img[$x])/1000,1).'KB</td>'."\n\r";
	$t=$t.+"\t".'</tr>'."\n\r";
	echo $t;
}

?>

[What's_nitro?]

OK, that makes sense when paired with your explanation. I'd say if the speed improved by 5x then HDD speed is holding you back now... Time to get that 300GB SSD you always wanted!

[BrianG]

Well, since PHP code is run on the server, it has nothing to do with my computer.