Graphics School: How to Customize Web Photo Galleries in Photoshop CS3
Here are the revised settings:
Styles: Simple Email: leave blank General Extension: .HTMI've enabled the Width and Height Attributes for Images
Banner Site Name: leave blank Photographer: leave blank Contact Info: leave blank Date: leave blank Large Images Resize Images enabled: Custom - 400 pixels Constrain: Both JPEG Quality: Medium - 5 Border Size: Zero Titles Use: remove all checkmarks Thumbnails Size: Custom - 125 pixels Columns: 4 Rows: 3 Border Size: 0 Custom Colors Leave at default settings.Here are the results of the thumbnail gallery. As you can see, the appearance is more pleasing to the eye.
Here's a sample from the large images gallery. As you can see, the presentation is also better, save for the file name at the top left and the gray banner. To use the code for your own galleries you can copy over what you need and leave the rest, or you can modify the Styles by customizing the HTML.
Customizing the HTML Code in the Photo GalleryTo create a customized web gallery you can modify one or more of the HTML template files in a web editor of your choice (I use Dreamweaver CS3).
Before you begin, make a copy of the original folder and give it a different name. When you run the Web Photo Gallery, both options will show up in the Styles drop down list. While Adobe recommends that you store your copy in the same folder, I feel that you should store it somewhere else, in a safe place, in case you need to restore the original folder settings.
On my computer, these folders are located at: C:Program Files AdobeAdobe Photoshop CS3PresetsWeb Photo Gallery. Your files may be in a different location. In the Style folder, there are the following files: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm, and FrameSet.htm. These names need to stay consistent, though it is possible to rename the Style folder. For this lesson, we will be using the Simple folder, which doesn't contain the FrameSet.htm file.
Each file uses tokens, which govern the way that the web galleries are created. Here's an example: <TITLE>%TITLE%</TITLE> If you've entered text in this parameter box in Photoshop, the program replaces the token with your text.
While you can set options in the Web Photo Gallery dialog box, you might want to change the settings directly in the template file. In this case, what I'm going to do is remove tokens from the template, so that when the file is generated only the HTML necessary for a web page will be created. Note that all the settings in the previous section are used when I activate the build process in the Web Photo Gallery.
Here's a section of code from the IndexPage.htm file. In the above section, I'm going to remove the highlighted areas of the code and build the Web Photo Gallery again.
Here's the resulting page. As you can see, the layout is much cleaner.
And here's the code:
You can go considerably further than this, by changing the background colors and adding in snippets of code, such as the script you would use for displaying Google Adsense on your site. Then, when you activate the Web Photo Gallery again, it will rebuild your pages with the Adsense code already in place, which is a great time saver.
Here's an example from a stock photography web site.