Welcome to Russell Proulx's Tips
    

Customizing Photoshop Web Photo Gallery Styles
Page 1 - Page 2 - Page 3

Customizing the Style

Load your website in Dreamweaver and then open and modify IndexPage.htm by deleting or modifying any element with a value enclosed in % signs. These include font sizes and colors, page background colors and other page properties, etc.. Put whatever picture you want in the top header, set any colours, font sizes and attributes, attach a CSS style sheet and delete any options you don't want. Items like %HEADER%, %PHOTOGRAPHER%, %DATE%, %CONTACTINFO%, %EMAIL% can be safely deleted and those choices will then simply be grayed out in the interface.

The only variables to not delete are:

In IndexPage.htm: the 2 GIF references (previous.gif amd next.gif) as well as %PAGE% and a little hidden bit named %THUMBNAILSROWS%.

In SubPage.htm: Leave the 4 broken image links. They’re the left/right and up arrows and the placeholder for the large version of your pictures.

BTW, Ignore the fact that arrow images are missing. They’ll all be added when the website is generated.

You could just finish here if you wish and copy the 4 files back into the Simple_Mod1 folder in Presets\Web Photo Gallery folder. The script does not expect SubPage.htm to be in a subfolder so you need to put them all together in the same Web Photo Gallery folder.

When run the Web Photo Gallery script in Photoshop you have only to select the Simple_Mod1 style that will appear in the list. Set the ‘Destination’ as any folder at the same folder level as were the elements you modified (in my example I was in the root folder of the site). I could use the same "portfolio" folder, but it's not necessary. What is important is that the destination folder be in the same relative position to the other folders on your site so that links to elements you added from your website will not break.

Everything should interrelate properly and all your added bits and pieces will appear where they should. If you want to change what you did simply modify the 4 style pages in the 'portfolio' folder and then copy them to the same Presets\Web Photo Gallery\Simple_Mod1 folder or create a new Simple_Mod1 folder to add a new style. If you muck up just delete that style folder.

Integrating the Style Code into a Website Template

Here's where things get VERY interesting. You can copy and paste just those bits that are essential to the style working and paste them into your own Dreamweaver template. This allows you to seamlessly integrate the browser into your own website design.

Note that only 2 pages really need to be modified in the Simple style; The SubPage.htm (which are your individual pages) and IndexPage.htm which is the indexes.

Create a new page from the site's Template, from the IndexPage.htm page just copy and paste in the table containing the 2 arrows and the %PAGES% as well as the little table below it which contains %THUMBNAILSROWS%. You can trash the rest if you don't need it. Save this new Template based page as the new IndexPage.htm.



Create a second new Template based page and from the SubPage.htm copy the table with the arrows as well as the broken image placeholder below which is %IMAGESRC%. Delete the %NUMERICLINKS% if you don't need them you can delete any of the %FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT% tags below. This is your new SubPage.htm page (remember it's saved in the subfolder).

When you use these new template modified files to generate a Web Image Gallery everything will fall into place. You now have custom styles that integrate with your Dreamweaver templates to create the your browsers. As all the template code is still in the pages you create, they will be updated by any template change you make in Dreamweaver. Just note that you need to also update the styles in the Simple_mod1 folder if ever you change the site's template.


Making Metatags work for you

One really kewl and useful thing is that %CAPTIONTITLE% and %FILEINFO% represent the "Document Title" and "Description" image Metatags (so much for consistency at Adobe...). This means you can add info for one or both of these to your RAW images while in Adobe Bridge and they can be automatically be inserted below each image in the browser. As you can see from the above example I put %CAPTIONTITLE% and %FILEINFO% where I wanted them to appear in the SubPage.htm page and set their font characteristics to what I wanted.

In the LyndaSG gallery she wants LOTs of images and treats this as a history of her work. After photographing the works I immediately add %CAPTIONTITLE% for the title of the piece (predefined as a larger bolder sans-serif font, 1st line) and then use the %FILEINFO% line for the medium, size and date on a second line (smaller font, no bolding). Thus I can easily add or remove pieces from the gallery and regenerate the site from a master collection of reduced JPGs. With over 300 pieces on her site using Metatags saves a ton of time!

By default the Web Photo Gallery script will strip out all metadata. If you're processing RAW images from Bridge for an photo gallery that might be modified and/or reused in the future you should first generate a gallery with the "Preserve all Metadata" option enabled. Then you'll have reduced JPGs with metadata intact in the Images folder. Move these JPGs elsewhere, delete the first Web Photo Gallery that was created and then create a new one (without metadata) using the reduced JPGs. This is a LOT faster than processing the same RAW files twice.

I hope you enjoyed this tutorial. - Russell :-)
 

  
 
 
© Copyright Russell Proulx 2007-2010 All rights reserved.
No reproduction permitted without the prior consent of Russell Proulx.


Disclaimer: Any techniques, advice and opinions offered on this website are a demonstration of my own personal methods of performing certain tasks. While I try to insure there are no errors, please understand that using these techniques is done at your own risk. I make no guarantee whatsoever and I will not be responsible if anything goes wrong. I assume you have a good working knowledge of your camera, computer and any software I discuss herein and have appropriate safeguards in place to protect yourself in the event that something goes wrong. - Russell Proulx