Photoshop's Web Photo Gallery is a powerful tool with endless possibilities--despite its benign appearance. On the most basic level, it allows a user to import selected images to be resized, thumbnailed, and embedded into a html gallery. Each image gets its very own html page, navigation, and more. Once this is created, a user can upload the entire directory to the web and they'll have a webpage. It is a suprisingly unused tool, and almost undocumented on the web. Only a hardful of sites talk about it, but nothing that I've seen really explores what you can do with the tool. I think the reason is that it seems, on the surface, to be almost uncustomizeable. The built in templates are interesting to look through, but no self-respecting web designer would be satisfied using someone else's design.
Where it gets interesting is when you explore how the templates are put together. It's actually just simple html! The information that photoshop uses are located in /[photoshop directory]/presets/web photo gallery/. Here you can see how the structure within the program mirrors your hard drive:
There's nothing tricky or hidden. It's all simply files and images that photoshop uses to generate full html pages out of. This means that if you have any understanding of html you have complete control. If you want to call your own custom images, simply put them in the /images/ directory. The .html pages are easily managed with any editor (including textpad if you've got the guts). Here's an example of how the file structure looks:
For integration with photoshop, Adobe has developed special codes that you can place in the html files that they call "tokens." These tokens allow for variables within the"Web Photo Gallery." For example, a token $BGCOLOR$ would allow you to set the background color within in the photoshop appletinstead of having to go through thecode and changing it, like this:
This means that once you have your templateset up, simple maintanence and color customization can all be done from photoshop without the hassle of html editing.
A useful photoshop token is called %NEXTIMAGE%, which generates a unique html address when it is called on within a subpage (the page you get to once you click on a specific thumbnail). So, for the html page looking at photo1.jpg, the %NEXTIMAGE% token would generate something like, "http://webaddress.edu/pages/photo2.html" after photoshop operated. Note that it generates a link to an html file, not an actual .jpg. Whiih brings me to:
Limitations - There is nothing built into the token code to generate a link to the image url in the next image. This proved to be quite a headache for me because I was interested in 'preloading.' Preloading images speeds up navigation for other people by calling up the file that you think a viewer will click to next. It loads in the background as your viewer is looking at what is already on screen. Hopefully, when they click to look at the next page the image will have already been loaded in the background, and then the browser covertly load the next file. But, without a way to call up the address to the next .jpg, navigation would be a bit groggy.
I tried to figure this out all last week. It may be that the solution is so simple that it's a given for most, but it was tough for me to figure out.
Since we have a code which will give us the address to the next html page, it is only a directory and an extention away from the address wanted. We want the address:
Here is where javascript can be a real help. Javascript allows you to set up variables, and then you can operate on those variables. We are going to make the html data be a variable, use the .indexOf operator to find where to cut, and then the .substring command to snip. As you can see, Photoshop's token %NEXTIMAGE_CIRCULAR%' is set up as the variable: "nxtimg." The variable "bad_ext" finds that offending .htm and stores the position as a number. This means that we can use the number of where the charater starts when we write the html, and snip appropriately.
This is where the document.write command comes in. It writes a simple <img src code, with the new /images/ directory, and then snips the filename from the zeroth position to the extention. Tadaa! If you add a css classification to make it hidden, you then have an image that loads, but is not seen.
And there you have it. The solution that I wish had already existed last week. What's nice is that with this code you could expand it with an <a href=%NEXTIMAGE%... or <a href="PREVIMAGE%... tocreate the popular effect of having thumbnails of the 'next image' and the 'previous image' on each sub page. If you have any questions on specific implementations, don't hesitate to email.
Where it gets interesting is when you explore how the templates are put together. It's actually just simple html! The information that photoshop uses are located in /[photoshop directory]/presets/web photo gallery/. Here you can see how the structure within the program mirrors your hard drive:
There's nothing tricky or hidden. It's all simply files and images that photoshop uses to generate full html pages out of. This means that if you have any understanding of html you have complete control. If you want to call your own custom images, simply put them in the /images/ directory. The .html pages are easily managed with any editor (including textpad if you've got the guts). Here's an example of how the file structure looks:
For integration with photoshop, Adobe has developed special codes that you can place in the html files that they call "tokens." These tokens allow for variables within the"Web Photo Gallery." For example, a token $BGCOLOR$ would allow you to set the background color within in the photoshop appletinstead of having to go through thecode and changing it, like this:
This means that once you have your templateset up, simple maintanence and color customization can all be done from photoshop without the hassle of html editing.
A useful photoshop token is called %NEXTIMAGE%, which generates a unique html address when it is called on within a subpage (the page you get to once you click on a specific thumbnail). So, for the html page looking at photo1.jpg, the %NEXTIMAGE% token would generate something like, "http://webaddress.edu/pages/photo2.html" after photoshop operated. Note that it generates a link to an html file, not an actual .jpg. Whiih brings me to:
Limitations - There is nothing built into the token code to generate a link to the image url in the next image. This proved to be quite a headache for me because I was interested in 'preloading.' Preloading images speeds up navigation for other people by calling up the file that you think a viewer will click to next. It loads in the background as your viewer is looking at what is already on screen. Hopefully, when they click to look at the next page the image will have already been loaded in the background, and then the browser covertly load the next file. But, without a way to call up the address to the next .jpg, navigation would be a bit groggy.
I tried to figure this out all last week. It may be that the solution is so simple that it's a given for most, but it was tough for me to figure out.
Since we have a code which will give us the address to the next html page, it is only a directory and an extention away from the address wanted. We want the address:
[rootdir]/pages/image_xx.html
to switch to
[rootdir]/images/image_xx.jpg
Here is where javascript can be a real help. Javascript allows you to set up variables, and then you can operate on those variables. We are going to make the html data be a variable, use the .indexOf operator to find where to cut, and then the .substring command to snip. As you can see, Photoshop's token %NEXTIMAGE_CIRCULAR%' is set up as the variable: "nxtimg." The variable "bad_ext" finds that offending .htm and stores the position as a number. This means that we can use the number of where the charater starts when we write the html, and snip appropriately.
This is where the document.write command comes in. It writes a simple <img src code, with the new /images/ directory, and then snips the filename from the zeroth position to the extention. Tadaa! If you add a css classification to make it hidden, you then have an image that loads, but is not seen.
<script type="text/javascript"> |
And there you have it. The solution that I wish had already existed last week. What's nice is that with this code you could expand it with an <a href=%NEXTIMAGE%... or <a href="PREVIMAGE%... tocreate the popular effect of having thumbnails of the 'next image' and the 'previous image' on each sub page. If you have any questions on specific implementations, don't hesitate to email.
