Brian Craig

2009-05-18 Update: I’ve refreshed the code with a few new features like a loading screen and better support for some SmugMug themes other than the default.

I love SmugMug, but I’ll admit it, I’ve always been a bit jealous of my Flickr friends’ photostreams. It’s such an easy way to show people what’s new no matter where it gets categorized.

I’ve gone ahead and put together my own version of of the photostream using the SmugMug public RSS feeds and a little bit of JavaScript. Here’s what it looks like on my homepage.

A photostream for SmugMug.

Want to add one to your SmugMug Page?

First, download this file and extract the two files that you find inside. (photostream.zip)

Adding Customizations to the CSS section.

Second, copy the contents of the Style.css file into the “CSS” section of the SmugMug Control Panel -> Customize -> Site-Wide Customization page.

Adding contents of the JavaScript file to the Head section.

Third, open the JavaScript.js file, change value of the SmugMugNickname variable to your SmugMug nickname, and update the number of photos you want to be shown. (Four works well with the default SmugMug theme.) Then, copy the contents of JavaScript.js into the “Head” section of the Site-Wide Customization page.

You’re done! Click “Update” and reload your SmugMug homepage!

The Caveats

Out of the box, this shows four images across on the default template. If you’re using something other than the default template, you might need to edit the value of the “margin-right” property at the very top of the CSS file.

If you’re using the original size thumbnails, you’ll probably want to update all of the instances of 150px in the CSS to be 100px. From what I can tell, the SmugMug original option for the thumbnails fit within a 100 x 100 pixel box.

Finally, I’ve done my best to use the same styles that SmugMug uses, but I haven’t tested it on very many of their themes, so please let me know if you run into problems!