HOW TO MAKE AND LINK
THUMBNAIL CONTACT SHEETS.

To begin with, you will need these two sites
Image Magick
Web Wizards Ways Image Toolkit
as well as an account at
Tripod
or
Wtv-Zone
(Tripod is a free website host, whereas Wtv-Zone is a pay host site.These are the only two hosts that I know of which allows Image Magick to load a directory rather then a single image.)
Got those two addys f-keyed and your website host already? Good! Then lets begin.

Go to your webhost and create a directory. Name it backs1 or gifs1 or whatever you little heart desires and move your first set of images in there.(Note: for ease of coding later-when making image map-you would be best to name these gifs alphabetically. When we make the contact sheet they will appear in the order they are listed in your subdirectory. If you use numbers, this will mean 10 will be next to 1 and so on through the teens, then 2, then through the 20's etc.) For this example I have 20 different eggs-like this one

that are in a directory marked egg1.Now what I want is an easy to load system to display those eggs for people searching for Easter Eggs.I could build a table and just display them but that's a lot of coding and a very slow load.That's over 100 kilobytes of images. Instead I want to create a quick loading image and then make it into an image map for easy viewing and quick loading.
To do this take the addy of the directory your images are in and go to Image Magick.On the first page enter the addy of your directory being sure to use the trailing / and click view.On the next page you should see the first image listed in that directory. Now click on the tab at the top of the page marked resize.
The first area you will be concerned with is image size. In the text area beneath that erase the preloaded numbers and type in the width and the height you want your thumbnails to be. My original image is 75 pixels wide and 100 pixels high. I want my thumbnails to be half that so I enter 37X50!.(Note you use an upper case X here and the explanation point. The explanation point forces IM to use your coordinates.)
Beneath this area are six radio buttons( zoom, sample, scale, double size, half size and thumbnail.) Click the radio button to the left of thumbnail and scroll down past the resize and reset buttons.
Scaling filter and blur factor don't concern us now-although you might want to come back and play with this. Different scaling filters can be used to reduce your images kb's and by putting in numbers larger then 1 you can sharpen your images while resizing them. For this example I used gaussian and a 2.9 blur factor.
Beneath those two buttons you will find Tile Geometry(thumbnail). This denotes how many images you want across and down. I used 5 columns and 4 rows.(5x4-note the lower case x is used here.)
Last thing you need to do before resizing is to chose the Framing Mode. Your options are unframed-your images will be placed side by side with no border between them, framed a 10 pixel frame is placed around your images seperating them from each other, or concatenate which does not frame your images but alter's the width or height of random images to produce a haphazard, uneven effect. Click the radio button to the left of your choice and scroll back up and click the resize button in the midde of the form.
For this lesson I chose frame and got this result.

LOL. OK I spruced it up a bit-I used the paint features below the image to color the frame and then again to color the space between the frames and then under the tab transform I cropped out the excess at the bottom.(The easy method for cropping is to use
Gifworks.They have an easy to use point and click method without the guestimation IM puts you through.
Done all your coloring and alterations now? Then click the output tab in the top row. On the next page you'll see a scrollable listing of image formats-click on it and scroll it up to gif and check that box. Beneath that click the radio button to the left of single file and then click the output button beneath that.
Almost done. On this final page you have two options. You can use their transloader beneath the image to tranload it to your website or you can click on the image and once it loads hit you goto button, click on show current, and then-holding down cmd-tap A and then C (you've just buffered the addy.)Now hit your f-key for the transloader I gave you earlier and transload away (Need help transloading? Click here!) to your webhost.
(Don't bother putting it in the sub-directory. When we are done creating the Image map we'll see if we can't make this image a little smaller and speed up the load time. For now you need the image in the gif format to use the Image Tool to create the Image Map.-whew-that's a mouthful. To understand how to create an image map just click here. Go ahead I'll wait. When you're done making the Image Map we'll go back to Image Magick and make some final changes.)
Back so soon? Now wasn't that easy? One final step and you are set to go.
Actually, this final step is for those people interested in conserving every kb pssible either to facilitate loading speed, or to conserve space at your webhost. For those not interested in kb conservation-you're done!!!!Congratulations and enjoy your contact sheet image maps.
Now for the rest of you,Take the URL of your contactsheet.gif to IM and load it up.Once on the view page, hit output and on the output page change the file format to png, click the single file radio button and click the output button. Now transload that file to your file manager, putting it into the directory your images are in. Finally, on your page change the image addy in the image map portion of your code from a gif to a png. Now you are done.Congratulations also to you and enjoy.
This page written by

JDVERTE aka Captain Raider

Back to the Main TUTORIAL Page