A couple of things that I love about RSS ("Real Simple Syndication") is that it is XML ("eXtensible Markup Language"), and that it is a fairly straightforward format, that can easily be used on both the server side and the client side of web applications. I've been in love with "Adobe Photoshop" since it was previously labelled "Aldus Photostyler", which some of you old school techies may recall from the "Windows 3.1" days. The day I found out just how powerful and simple it was to create photorealistic pictures on a computer, I knew that would be an arena where I would be spending quite a bit of my future.
In this post, I'll demonstrate how to use Photoshop to create a RSS feed of your favorite images. Photoshop has a feature that has been in the last few versions, starting about the time that the Internet started to become more mainstream. This automation feature allows a Photoshop user to create a simple collection of web pages that display a folder of images in a HTML frameset. I usually save all my images in both the Adobe *.psd file format, and various sized copies and versions in the *.jpg format. To find this feature in the current Photoshop "CS" menu, click "File" or key "ALT-f, then click "Automate" or key "u", then click or key down to "Web Photo Gallery". This will bring you to a dialog windows where you can select a pre-defined template, and define some parameters, but we will come back this shortly.
As I mentioned, there are several templates for web galleries that get installed to your computer,when you install Photoshop, and we are going leverage these to create our RSS template(s). The following directions are for Windows user, as that is my only experience, and I don't currently have access to Photoshop on any other platforms.
First, let's find you Photoshop install location on your hard drive, using Windows Explorer. For exmample: "C:\Program Files\Adobe\Photoshop CS". Next, you will want to locate the subfolders "C:\Program Files\Adobe\Photoshop CS\Presets\Web Photo Gallery". In this folder, should reside several other subfolders of various names that contain some HTML files, and in some cases, yet another subfolder labelled "images". For our purposes here, copy (CTRL-C) one of the folders, and paste it into the same parent folder ("C:\Program Files\Adobe\Photoshop CS\Presets\Web Photo Gallery\copy of GalleryTemplate\"). If there is an "images" folder, feel free to delete it, as it serves us no purpose in this example. When running, Photoshop reads the subfolders from the "Web Photo Gallery", as uses that as the list of template in the aforementioned "Web Photo Gallery" dialog window, so let rename our copied folder to "RSS", so we can identify it later.
At this point, you should have a folder path that looks like this: "C:\Program Files\Adobe\Photoshop CS\Presets\Web Photo Gallery\RSS". Now let's get our hand dirty with editing the HTML files. There are 5 HTML files typically in this new folder, and are listed as such:
- Caption.htm
- FrameSet.htm
- IndexPage.htm
- SubPage.htm
- Thumbnail.htm
Do not actually delete any of these files, as this will cause an error when attempting to run of automated RSS template from within Photoshop. We will only be using two of these files for RSS Template, "IndexPage.htm" and "Thumbnail.htm". The other three pages are not needed (unless someone has an idea on how they might be useful in this context), so we are going to open those three and remove all the text/HTML, as save them as empty files. You can do this in Windows Notepad or a free HTML editor such as Visual WebDevelop 2005.
Next, let's focus on "IndexPage.htm". Open this file in you favorite text editor, and remove all the previous text/HTML, except for the specific text - "%THUMBNAILS%". I should mention that if you read the original HTML, you will see other text that contains % signs, and Photoshop uses these variables only if the image file itself has these attrbiutes. This variable ("%THUMBNAILS%") is used by Photoshop to call the "Thumbnail.htm" file recursively, and places the HTML/XML from "Thumbnail.htm" in it's place. Next, we are going to modify the contents of "IndexPage.htm" with a very basic RSS template, should resemble this:
<?xml version="1.0" encoding="utf-8"?>
<!-- generator=http://yourdot.com -->
<rss version="2.0">
<channel>
<generator>http://yourdot.com</generator>
<copyright>(C) 2006 Sean Gephardt and Zillinois.com, All Rights Reserved</copyright>
<pubDate>Sun, 13 Nov 2006 00:00:00 EST</pubDate>
<lastBuildDate>Sun, 13 Nov 2006 00:00:00 EST</lastBuildDate>
<managingEditor>your.email@yourdot.com</managingEditor>
<webMaster>your.email@yourdot.com</webMaster>
<language>en-us</language>
<category>guitars</category>
<link>http://www.yourdot.com/</link>
<title>The title of this RSS feed for yourdot.com site</title>
<description>The description of this RSS feed, from yourdot.com</description>
%THUMBNAILS%
</channel>
</rss>
Next, let's move onto the "Thumbnail.htm". We are basically going to use the same approach as mentioned above, this time we want to make sure that we say the test "%ALT%", as Photoshop uses this variable to write the name of the file. Because we have no control over how Photoshop parses this template file, I've found that you need to consider the URLs that your site use, as it relates to where you are going to store the images on your web server. The following is similiar to a version that I've used to create the RSS feed for the
Fender Custom Shop 50th Anniversary 1954 Image Gallery, which is built using ASP.NET and a RSS file created using this process. It creates two simple links ("<A>"), one around the image, and one text link.
At this point, make sure you have saved all these changes, because we are now ready to create the RSS file. It's time to go back to Photoshop, and step through the directions mentioned previously. On the "Web Photo Gallery" dialog window, you should be able to find our new template in the "Styles" drop down list. Select this style, and go ahead and change any of the other template attributes that meet your fancy, and then click the "OK" button. This will create all the new files in the destination folder you selected. For example, let go to my sample folder "D:\MyWebRoot\TestFolder". Within this folder you will file a folder for the actual images ("..\images\"), for thumbnail images ("..\thumbnails\"), and for the gallery sub pages ("..\pages\"). Delete the "pages" folder, unless you intend on using it, but the frameset functionality will be broken, so you may need to try a different Photoshop Web Gallery template after we finished these last few steps. Next, delete the "index.htm[l]" and "userselections.txt" files. And our final step, rename the newly created "ThumbnailFrame.html" to whatever you'd like your RSS file to be named, perhaps "rss.xml". As I mentioned at the beginning, RSS is a XML format, so I'd suggest sticking with the *.xml file extension (or whatever your OS/Platform requires that is equivalent). You'll also want to view this file in some sort of XML viewer, like Internet Explorer or FireFox web browsers. These applications will display any errors, and if there are you most likely will need to re-edit either "IndexPage.htm" or "Thumbnail.htm" to fix them, and re-run these instructions.
I hope you find this useful, and I welcome any feedback. Also, here are the files that I'm using, which can be easily modified for your own use.
RSS.zip (1.27 KB)