Automated Gallery Creation Using Dreamweaver and Fireworks

I'd been using Macromedia's Dreamweaver and Fireworks software for a couple of months before I realized that the two programs could work together to automate one of gallery building's more repetitive and time consuming tasks. If you've got both of these programs on your computer, here's how to quickly and easily get those thumbnails arranged on a page and linked to their full-sized counterparts.

Start with the optimized, full-sized pictures that are going to make up the content portion of the gallery/page you're building (Fireworks can also quickly and easily batch process your pictures so that they have optimal resolution with a greatly reduced file size, but that's another tutorial). Put all the photos that you want on your gallery page together in one folder. Make sure that they're the only photos in that directory, because all of the pictures in the folder will be added to your gallery. If you're making a site (as a opposed to a single page gallery for submission to a TGP), put each page's pictures in their own folder, and write down or remember which folder contains which set of photos. I like to name the folders "a", "b", "c", and so on, in the order that I want my pages to progress.

When you've got your large pictures separated into their folders, go to the directory in which you want the final gallery or site to end up. For me, this is generally the root directory (on my computer, not the server) of whichever domain I'm going to put the site/gallery on. In this directory, create a corresponding folder for each of the gallery page folders that you just made (I like to give them the same "a", "b", etc. names as the first set of folders. Makes it less likely for me to screw things up). Once you've got these two sets of folders created, you're almost finished with your part of the building process--you're just about ready for the computer to take over.

If Dreamweaver isn't running, go ahead and start it up. You don't need to worry about starting Fireworks--Dreamweaver will start it for you when necessary. Begin by creating a new .htm or .html page (File>New>Basic page/html). Don't worry about saving the page right away, as is usually encouraged, because the automation process saves the page for you. When you're looking at your new blank page, click Commands>Create Web Photo Album. That will bring up this dialog box...

In the "photo album title" field, I usually put the name of the folder/directory that contains the photo contents for this particular page (again, "a", "b", and so on). This title will be the heading of your gallery page when it's finished, but, as I generally am going to want to fiddle around with the title, colors, font, etc., whatever I put in this box now is going to be temporary. For this reason, I always leave "subheading info" and "other info" blank--I'll just end up changing them later anyway.

"Source Images Folder"--Click "browse", and navigate to the folder with your pictures. Double click the folder so that you are inside that directory. In the lower left-hand corner of your file browser, it should say "select: (name of directory)". Click "select".

"Destination Folder"--Click "browse", and navigate to the folder you've created that's going to contain the finished gallery. Again, you should see "select: (name of directory)" in the lower left corner. Click "select".

Then use the remaining input fields to choose thumbnail size (choices are 36, 72, 100, 144, and 200--that number refers to the long side of the thumbnail--I generally go with either 100 or 144), number of columns in your thumbnail table, thumbnail and photo format (choosing high quality will add a little bit of size to your image files, so keep that in mind), and scale (if you've optimized your photos, they're probably the size you want already, so leave it at the default 100%). There are also two checkboxes available. "Show filenames", which will label each thumbnail with the corresponding large photo's name, and "create navigation page for each photo". This will put each large photo on it's own .htm/.html page. As many link lists do not allow large images to be on html pages, I always uncheck this box, as well as the other one.

Now click "ok". If Fireworks is not open, Dreamweaver will go ahead and start it up. The software will take care of everything now, and before long you should see a dialog box telling you the process has been completed. Click "ok", and you should be looking at your thumbnail gallery page--ready for you to add your text, banners, color choices, etc.

This is the first tutorial I've written, so if it's not as clear as it could be and/or you have any questions, drop me a note at webmaster@smutmanor.com

Back to Smut Manor's webmaster page