Preserved Topic: A new and useful toy! (Auto-thumbnailer with PHP)

Whee! I just did something marvelous, (at least for me, heh!) For years I used this old tempermental PERL script tool that my friend Doug Rau wrote lo, these many years ago, for displaying and generating thumbnails in my old FTP directory on OZONE. The thing is, I never really understood just how it did what it does, and so I couldn't do any of my *own* things with it either, hrmph. I always wanted to write my own one of these scripts, and finally I talked myself into a corner, I needed to do it for my newest client! I shaved bunches of dollars off of his final bill, one of the terms was that I'd develop the needed scripts on my own, which means that I own them. I now one a really neat script, woo!

Q: What should I do, sell it for millions of dollars, or give it away?
A: Give it away. Nobody will give me millions of dollars anyway. ;-)

DEMO: http://seavisions.dreamhost.com/archives/index.php
ZIP: http://www.znippets.com/ZIP/autoThumbs.zip

Now I built this thing to work on any Dreamhost server, just drop the contents of the ZIP into the directory that contains your images and directories of images, it should just work, auto-generating thumbnails, and launching a new browser window if you click on the thumbs. (Since it's geared for Dreamhost, it uses ImageMagick instead of NetPBM or the GD libraries. What a cool program! How poorly documented! Woo.) You can adjust a few parameters, set the number of images to display at a time, or another variable for a different path to ImageMagick. Set these two variables...

$displayMany = 12; // <==!!! key value, only display 'X' at a time.
$pathToMogrify = "/usr/X11R6/bin/mogrify";

...or simply leave it alone, it should work right out of the box, no modifications needed. Tested only on Dreamhost, I assume that the $pathToMogrify would be different on different hosts, and I've included an .htaccess to set .php files to run as php-cgi instead. (Runs with permissions as "you".) I also put in a catch to stop folks from browsing ../../../.passwd files, etc... If any of you hard core server programmers note some other obvious security issues, please, tell me about them!

Have fun, I'd love to hear how this works for others here.


Your pal, -doc-

Neato-keen.

So how does it work internally? Averaging pixel colors?

lovely script Doc .. [tosses you a Doc Otis]


.::. cEll .::. 513

Most of it is just PHP directory listings, which I save into 2 arrays, one for directories and another for images. (This lets me sort them, and also handle the "next" and "back" links.) The maiking of the thumbnail happens the first time it's going to be called, if it's not there, it copies the file over to a hidden ".minis" directory and then resizes them, like so...

if (!is_file($newFile)) {
if (!copy($fileRef, $newFile)) {
print ("failed to copy $file...<br>\n");}
if (($dispWidth>$max) &#0124; &#0124; ($dispHeight>$max)) {
$cmd = "$pathToMogrify -geometry $maxX $newFile";
exec($cmd, $exec_output, $exec_retval);
}
}

The if (($dispWidth>$max) &#0124; &#0124; ($dispHeight>$max)) { line just checks to see if the file is already small enough to fit in the bounding box (set to 180 for me), and if so then it just copies it. The expanded $cmd that I send in (the exec() call is why I needed php-cgi) looks like this...

$newFile = $DOCUMENT_ROOT . $whichDir . '/.minis' . $subDir . "/" . $imgFiles[$i];
$cmd = "/usr/X11R6/bin/mogrify -geometry 180x180 $newFile";

Not very elegant, but we only have 1.62 of the GD library installed, which limited me to just .PNG if I used the standard PHP/GD way of doing things. Lots of kludges, but good ones I hope! ;-) I do waste some CPU cycles, like I recalculate the $imgFiles[$i] array each time, (each 'next', etc...) but that doesn't seem like much a burden.

Your pal, -doc-

Doesn't seem to like your CSS in Mozilla. (viewed in Moz 1.1)

How funny I was just working on something like this but in an OOP type structure, I too was using ImageMagick here's what I did (it's a class just because I really like reusing this kind of thing)

Here's my basic code, no display code, just the thumbnail create code.

<?
class bit_image {
var $ERROR;
var $MAGICK = "/path/to/ImageMagick";

function create_magick_thumb($image_path, $width, $height, $border_size = false, $border_color = false) {
// Borders tag onto the outside so we need to trim the fat.
if($border_size) $width -= (2 * $border_size) ; $height -= (2 * $border_size);
$info = getimagesize($image_path);
// We are not going to distort images instead we will hack edges.
$cropW = floor($info[0]/$width) * $width;
$cropH = floor($info[1]/$height) * $height;

// Thumbnail name.
$thumb_name = "thumb_".basename($image_path);
$dir = dirname($image_path);

// path to new file.
$new_file = ($dir) ? $dir."/".$thumb_name : $thumb_name;

// Create the copy command
$cp_cmd = "cp $image_path ".$new_file;

// Create the crop command
$cr_cmd = $this->MAGICK."mogrify -crop ".$cropH."x".$cropW." ".$new_file;

// Create the resize command
$rs_cmd = $this->MAGICK."mogrify -geometry ".$height."x".$width."! $new_file";

// Execute the commands.
exec(EscapeShellCmd($cp_cmd));
exec(EscapeShellCmd($cr_cmd));
exec(EscapeShellCmd($rs_cmd));

// Do we need a border?
if($border_size) {
$bd_cmd = $this->MAGICK."mogrify -border ".$border_size."x".$border_size." -bordercolor ".$border_color." ".$new_file;
exec(EscapeShellCmd($bd_cmd));
}
}

}
$test = new bit_image;
if (!$test->create_magick_thumb("/var/www/html/aramfish.gif",100,100,1,"#336699")) echo $test->ERROR;
?>


All you do is instantiate the class then pass it the path to an image, the size you want the thumb, width of a border and the color of the border you should just need the imageMagick mogrify binary

The way I decided to do it without warping the image was to pass in the height and width you want and if the dimensions do not match up it will crop to a multiple of the thumbnail size and then shrink that. It's not perfect and could be done better but it's a decent first run hack.




.:[ Never resist a perfect moment ]:.

[This message has been edited by bitdamaged (edited 09-04-2002).]

[This message has been edited by bitdamaged (edited 09-04-2002).]

Arrr, I trierd to reply when you were moving it... that as weird. That's a great script though!

"What a cool program! How poorly documented!" I'm soo glad I'm not the only persont hat thought that.

"only have 1.62 of the GD library installed, which limited me to just .PNG"

There are some ways arouund this but you have to be able to re-build PHP with some not so legal hacks to get .gif supoprt. There's lots of info about that in the online PHP manual for the GD functions.

The other option you could look into if your wanted to make a non-imagemagik version wuold be to use a simple GIF to PNG command line conversion program. Then you can just convert all of the .GIF to .PNG images upon upload. I found a really small and fast program that did just this once (converted both ways) and ti kept the transperancy intact too!... alas, I don't have it anymore but I know it was a right pain in the but to find.

Some other ideas I had for my gallery script before my HDD crash 12 months back killed it were a web based upload script and the ability to attach captions or descriptions for the images. I also build two sizes of thumbnails for it, one really small one for a list like view which would also display the filename, dimentions, descriptions etc... And a bigger one for the bore traditional thumbnail browsing.

I was also working on a javascript/CSS positioned layout that positioned the thumbnails much like the auto arrange feature in windows. When you resized the window they would shuffle around to re-form nice neat centered columns. Curse that HDD crash! Now I'm so wanting to tinker with that script again....

Well, the whole goal with this script is not so much to make a "web gallery", but instead to allow you to find the image you want to add to a web page. I've got a drag & drop script I made last month and I was going to allow you to drag the image into your "composing" window, where you can drag the corners to resize it, and add text in other floating <div>'s you can drag around. When you're done, it'll save all of the elements, with the height/width/top/left, then make the correct size image from the big copy in the main archive. I'm betting it's going to work great for my client to build his own pages with, and have a heckuva good "gee whiz" factor too! Much better than letting him continue to use FrontPage?, heh.


This window is now too wide to display on my monitor at 1152 x 864. I hate it when that happens. bitdamaged, mind if I edit that code of yours, add a line break, maybe? ;-)

Your pal, -doc-



[This message has been edited by DocOzone (edited 09-04-2002).]

done



.:[ Never resist a perfect moment ]:.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Oooh... I'd love to see that drag an drop script in action.