How to customize Adobe Photoshop's Web Photo Gallery Function

The index page of my photo blog was written by hand using CSS. But all the other pages for the individual entry of the blog were created in a batch fashion. It would be too labor intensive to create all the pages manually. Instead, I used Adobe Photoshop's Web Photo Gallery function.

Here are the steps. From the Photoshop menu, choose File -> Automate -> Web Photo Gallery. You will get this dialog box.

You can choose a style with the Styles dropdown box. The pictures shows the "simple" style, which has much cleaner design than the others. You might like other styles though.

Next, choose the source and the destination of the files. Put the photos in the source folder. The generated pages and images will go into the destination folder.

Then, there are some parameters you can set using the Options dropdown box. You can fill in information such as site name, which will set the title of the generated web page. It also allows you specify the page layout, thumbnail size and color scheme etc.

Once you click the OK button, Photoshop will do the rest of the work for you in a fast forward fashion - opening each photo, resizing, saving and closing. And you will get an index and subpages like pages shown here.

The problem is that the Web Photo Gallery dialog box only has limited options and there are some major issues with the pages that are generated automatically. First, the index page generated has some empty lines because I choose not to enter information such as copyright info in the Web Photo Gallery dialog box . It's not a big issue though, because I will manually add some text later on the index page anyway. However, I really don't like the generated individual photo page because it wastes much of the space on some text that I don't need (shown in the red circle).

Here are my revised pages.

Notice that I add a link back to my main photo blog page and get rid of the text on the individual photo page. You cannot make such changes directly with the Web Photo Gallery dialog box. And manually editing all the pages afterwards would defeat the benefit of using the Web Photo Gallery automation.

It turns out that you can customize an existing Web Photo Gallery style simple by editing the HTML template files. On my machine, the templates are stored under sub-directories of \Program Files\Adobe\Adobe Photoshop CS2\Presets\Web Photo Gallery\. For example, for the "Simple" style, there are four templates files in the "Simple" sub-directory.

If you would like to customize the Simple style, I suggest the following steps.

  1. Copy the template files from the Simple directory to a new directory. The name of this new directory will later appear in the Web Photo Gallery dialog box's dropdown list of Styles.
  2. Using an HTML editor, open the IndexPage.htm. You can add a custom style sheet reference in the HEAD section or just replace a token in a template file with the appropriate text or HTML code, like replacing the token bgcolor = %BGCOLOR% with "#000000". You can also add a link to the main photoblog index page like I did.


  3. Using an HTML editor, open the SubPage.htm. Again, you can add a custom style sheet reference in the HEAD section and replace a token or text in a template file with the appropriate text or HTML code.
  4. You probably don't need to change the other two HTML template files.

Go play with the template files and have fun. You can create some photo galleries that are much more visually pleasing!