Customizing Photoshop Web Photo Gallery Styles
Page 1 - Page 2 - Page 3
Integrating the Styles into a Website Design
You first need to copy the four Simple style elements Caption.htm, IndexPage.htm and Thumbnail.htm from Simple_mod1 into a folder within your website and place the SubPage.htm into a subfolder within that folder. The name you give to the subfolder isn't important.
In the above example I've created a folder which I've named portfolio within the website. In there I have placed Caption.htm,
IndexPage.htm, Thumbnail.htm Within that folder I create a sub-folder named subfolder and placed Subpage.htm in there. The name used for this subfolder is not important. What is important is that the subpage be placed one folder layer deeper than the other files so the relationship created by the Web Gallery script will work properly. If you do not do this the links to your website elements will not be correct.
What do the 4 parts of the script do?
The scripts use a simple technique to manage all the variables. The variables that script will modify are contained within % signs. For example the photographer name is indicated by %PHOTOGRAPHER% and the script will enter that info wherever it finds %PHOTOGRAPHER% in the page. If you remove %PHOTOGRAPHER% nothing will break. The information will simply be ignored and that choice will be grayed out in the Web Photo Gallery menu. If you asign a font for %PHOTOGRAPHER% then the Fony option will simply be grayed out in the Web Photo Gallery menu. There are very few elements that cannot be changed and have the script continue working properly.
( the 2 bold red ones are essential ones)
Caption.htm - Generates captions that you write within the Photoshop Web Galley script. You can still do this within Photoshop or simply ignore this if you're not going to make use of that feature. It is non-essential and I usually ignore it.
SubPage.htm - This generates the large single image view and is an essential element.
IndexPage.htm - is the main index browser with thumbnails and is an essential element.
Thumbnail.htm - used to create the thumbnails. Not something you usually want to modify.
Here's what you see when you open the IndexPage.htm page in Dreamweaver: This split view displays the html code in the top half and what you see in Dreamweaver in the bottom. The areas indicated in RED are the corresponding elements. The %HEADER%, %PHOTOGRAPHER% at the top of the page is what you enter in the Web Photo Gallery interface. You can delete any ov these that you don't usually make use of.
The area in RED is the essential parts of the script. The broken links represent the left/right arrows that will be created when the script is run. Do not be concerned about broken image links and they will work just fine when the gallery is generated The %PAGE% is for the page numbers when you have more than one Index page. ( Page 1 of 3, 2 of 3, 3 of 3 etc..) . You can still select %PAGE% and modify its font attributes using Dreamweaver if you wish. The small dotted square below %PAGE% is the placeholder for the thumbnails table that will be created and it's named %THUMBNAILSROWS% in the HTML code.
Here's what you see when you look at the Subpage.htm part of the style.
The navigation arrows are the 3 broken links at the top and %NUMBERLINKS% is used when you choose "Add numerical links" in the Gallery setup. The center dead image link represents the full size image that displays on each page and below that are all the other variables contained within % signs. This is info you entered in the Gallery setup or is extracted from the image Metadata.
Page 3 - Customizing the Style