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.
Want to add one to your SmugMug Page?
First, download this file and extract the two files that you find inside. (photostream.zip)
Second, copy the contents of the Style.css file into the “CSS” section of the SmugMug Control Panel -> Customize -> Site-Wide Customization page.
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!
7 Responses to “A SmugMug “Photostream””
Glenn
Hi Brian, love your photostream. I would love to use it on my site, I followed your instructions to the letter and all I get is the Newer/Older controls, no photos. Any assistance would be greatly appreciated.
Cheers
Glenn
Richard
Thanks Brian, this is just what I was looking for. It works great!
Jeremy
Hey Brian, where are you hosting the jquery file? Is it free?
I am currently using yahoo’s free geocities site for stuff like this but it is shutting down soon.
Also, have you thought about writing the photostream code with YUI since it’s already loaded when SmugMug loads?
brian
Jeremy,
I’m currently hosting it on my own servers. If it gets really popular and the bandwidth starts costing me real money, I’ll switch it over to Google’s hosted version of jQuery on ajax.google.com.
I haven’t put any thought at all into writing it using YUI. I’ve used YUI in the past, and it’s been fine but I’m more familiar with jQuery these days.
Terry
Brian, the script looks great and it looks great in action on your website. Im putting this on my ‘to do’ list for my smugmug site. I see you are using jquery 1.2.6. Do you know if there is no significant advantage in using the latest version, jquery-1.3.2? Im using the latest one with my smugmug menu, but Im not sure if it is necessary. Ver 1.2.6 is slightly lighter weight in file size. I downloaded the full size version of 1.3.2 and then compressed it with bananascript to about 35% of its original size however.
Jeremy
Wow, can’t believe I’m just finding out about the google ajax library.
With the ability to load the version you desire I’m not sure why you’d even want to host on your own site. Thanks for pointing me there Brian.
http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery
Now if that really cool example out there isn’t easy to convert to YUI then I can bite the bullet and go with it’s library.
Lorraine
thank you for such a wonderful application / additive for smugmug pages!