Skip navigation.

Harold's Home

XML version of this site

PHP Scripts

CLI fun
Mail on 404
HB-NS (NewsScript)


APOD to Desktop
Dreamweaver Extensions


Other stuff
Central Grinder

OOOk Default:

VJ stuff
VJ Tools
Sample Movies


Automating the web
I created a photo gallery for the web today. It's not quite ready for prime-time yet but herewith some of my observations on tools and tricks you can use to make life easier.

Automation rocks!
Every tool I used can be automated.
I used some applescripts (for the Finder), some photoshop actions, some batch find and replace actions using GREP in BBEdit and I customised a web contact sheet from the default install of Photoshop.

First things first. I had about 30 digital photographs, with stupid names like IMG_1012.JPG. I used one of Apple's script menu scripts to replace the IMG_10 in every filename with another name, let's say Abc_Def.

screenshot of the script menu with the Replace Text in Item Names item selected
Apple seems to have temporarily misplaced the download for these scripts but here's my copy in the meantime. (It could be that these are now part of the default install by the way.)

I then replaced .JPG with .jpg seeing as I'm anal about uppercase filenames.

Following this I opened one of these files in Photoshop and recorded an action wherein I resized the image and changed the curves (Curves rocks) to brighten the image a bit.
When the action was to my liking I stopped recording and closed the file (not saving any changes). I then Batched this action across the entire folder of renamed images. (File:Automate:Batch...)
After all the files had been changed I opened them three at a time in Photoshop and applied a lighting effect. As the preview of this effect is quite small I often immediately had to undo the action. Normally when you choose to redo an effect the dialog will not remember your previous choices. To bypass this hold down the option key as well when choosing the effect, or hit command+option+F (control+alt+F on Windows I think) to open the dialog with your previous choices. You can then easily tweak these. This works with almost all tools that have a dialog, including the previously mentioned Curves (command+option+M versus plain command+M).

After all the files were more or less to my liking I decided to automate my life still further. First I used the default "Simple" template of Photoshop's web-gallery action (File:Automate:Web Photo Gallery...), however this created some horrible HTML.
I remembered digging in the Photoshop support files once and making some changes there to create cleaner HTML. Unluckily for me I did this on an old computer at work and not at home. There was no option but to restart.

Photoshop uses four partial HTML files to construct a web gallery. Here's where mine are: "/Applications/Adobe Photoshop 7/Presets/WebContactSheet/Simple". On Windows they're probably in "C:\Program Files\Adobe Photoshop 7\Presets\WebContactSheet\Simple".

I opened up all four files and changed them to write XHTML 1.0 Transitional, with a link to an external stylesheet, properly quoting some attributes and replacing outdated <CENTER> tags with div's. I plain trashed the <FONT> tags and body attributes. We're well and truly into the century of the fruitbat now anyway.
They may not be of much use to you but if you want to see what I did here's my new "Simple" contact-sheet.

After making these changes the created web-gallery was almost ready to validate, note that Photoshop will still put in some uppercase <TR> tags which you will need to change later in a web-editor.
In BBEdit I applied source formatting over all the files and replaced some alt texts using GREP to preserve the photonumber.
Find: alt="Abc_Def_([0-9]+).jpg"
Replace: alt="Abc Def \01.jpg"

I also later batch added accesskey attributes to the previous and next images and stripped away the "top" link to the thumbnails as I had no use for these. (I should simply put change that in the Photoshop template I now think.)
Find: <a href="Abc_Def_([0-9]+).html"><img src="../images/next.gif"
Replace: <a href="Abc_Def_\01.html" accesskey="n"><img src="../images/next.gif"

Note that if you're using BBEdit you can either record this action on one file and then use the resulting applescript on all your files, or change a whole folder of pages in Batch mode, saving some time. If you're using Dreamweaver you can also record commands and replay them on other files, though Dreamweaver uses it's own method and doesn't create an easily modifiable Applescript.

There's still some work to do, some of the images are not really to my liking at the moment, but for today this is enough. Automation can make your life that much easier. Letting you focus on the more artistic work, although figuring out how to automate some of this stuff can be quite challenging and fun too.

Show all items | Read all items

About, copyright, privacy and accessibility | Mail