The Iggblog

Many moons ago I had a “pics” directory on my website full of random crap, with a bunch of subdirectories also full of random crap. Among these was the pics/misc directory full of anything I found on the internet that was remotely funny, useful, or offensive (usually the latter). I knew nothing about scripting at the time, so I wrote a monolithic hack of a script to manage everything. When invoked by browsing to index.cgi, it would check each file, and if it was a picture it would generate a thumbnail and stick it in a thumbnail grid for easy browsing. Pretty much the most basic possible page to take care of thumbnails and gallery functions. It worked well for a while, but my image dump has grown considerably. Loading ~800 images on a single page is bad for a number of reasons… especially when the page is generated on the fly. Originally I used it as a method to learn more about bash scripting, so you can imagine how gracefully it was written.

I decided I wanted something new. First and foremost it had to be ridiculously simple… I didn’t want anything with bloated features, flickr integration, or some kind of drag-and-drop GUI. I wanted a script that got dropped into a directory, and would simply generate a gallery of all the images in that directory, as well as links to subdirectories. Some smaller features I wanted was something that would split thumbnails into a reasonable amount per page, create links to subdirectories, have a big preview pane, and be driven by some sort of sexy javascript. So I basically chopped up my old script, and messed around with some CSS and JQuery till I got it looking how I wanted, learning a ton in the process.

Anyways… here’s how it looks now:

Image dump, now sexier

Its only requirements are a couple jquery files and a few CSS files. Once you have them placed, it’ll work in any directory. It looks in its present working directory for a “thumbs” folder with 75×75 and 500×500 version of each image. I have a script that is a terrible, terrible, awful hack that does this via ImageMagick. It’s basically the guts of my old script when thumbnails were generated on the fly. The CGI script, CSS, Jquery, and thumbnail generation files are all here:

The main sexy: the index script (rename index.php)
The above file is the only one you need to put in every directory. The following only have to be placed once.

Basic CSS file
Gallery specific CSS file.
Dropdown menu CSS file
Main jquery library (current as of 07/2009)
Galleriffic jquery plugin (same caveat as above)

And my own little creeping horror…
Thumbnail generation script, use it if you need it.

I have a link to an upload page in the dropdown menu, which is a feature I was going to include into the page itself. But for now I’m leaving it separate for my own reasons. I leave the menu entry there because it works for me, and as a placeholder for anyone else that wants to use the script. My only gripe is that I’m unwilling to dive deep enough into the javascript to figure out how to make it launch a full sized image in a new tab when you click on the preview… for now you have to click “download original” on the bottom right. It’s still a kludge of a page, I’ll take 9/10 things I wanted accomplished. Feel free to use, redistribute, hack up my script.

Credit to Gallerific for the jquery plugin, this guy for the CSS I stole to make my dropdown menus, and to Dave Taylor for his web gallery CGI script… ancient echoes of which still exist in my index and thumbnail files. My page looks a lot like the Gallerific “advanced example”. The work I did was mostly for the on-the-fly link generation for the thumbnails and directories so that this will work dynamically in any folder.

Originally published at The IggBlog. You can comment here or there.