Custom JavaScript Gallery Slideshow Widget for the PhotoShelter API

August 23rd, 2012

Recently, my friend Amy Fletcher asked me to help her out with her site. Like many photographers, she’s using PhotoShelter for organizing, storing, and managing her client deliveries. It’s a great site and tool for a lot of things, but like many companies that provide full hosting, things get a little hard when you want to go full-custom with your design. Amy wasn’t happy with any of the design templates they provide, and wanted to stand out and not have a cookie-cutter design, besides.

She has some custom blog and other third-party integration features she wanted to do, as well as a custom gallery widget design. Luckily, I have my own CMS I just open-sourced that I use for these types of projects, and we got her  up and running fairly quickly. The only catch was the custom gallery. The current PhotoShelter widget is done in Flash, and not really customizable. Also, we didn’t want to create a parallel system for managing her media, so things were looking a little down.

As it turned out, PhotoShelter has an API you can use to access your data remotely, so we were in luck. While their website is pretty skimpy on details, with only a page noting the current version is deprecated their customer service &  engineering staff were (as usual) really great, super-responsive, and they forwarded me to a link with the current PhotoShelter API docs. It’s sparse, but useful, and pretty self-explanatory.

The only real difficulty working with the API came about because it currently requires authentication and a session cookie, rather than the standard API key. I was told this was because the current API is new & geared toward commercial clients, and that they are working very hard to produce a more user-friendly public API. I got around the issue by making a server-side proxy to handle the authentication and data retrieval.

Less difficult, but a bit of work was that there are no convenience objects, so a call to a single gallery could take dozens of server hits. This would normally be okay, but due to the authentication/cookie issue, this would have caused me to make dozens of proxied server hits. So, to get around it, I do it all at once, and cache all the data locally into a JSON file. Luckily, I’ve got heaps of XML & JSON and JavaScript serialization/deserialization utilities lying around, so this was pretty straight-forward.

While it’s not ideal, it’s a pretty good working solution that got us the desired results — a nice, clean looking gallery widget with our custom design, all stored in the same PhotoShelter system we use for everything else. The only manual step is having to run a cache-busting utility every once in a while, but honestly, they won’t get updated enough for that to be too much trouble. For a company like PhotoShelter, support for web services allows them to concentrate on their core services and client-base, while giving clients like Amy an avenue for achieving their business goals. It’s just not going to be possible to foresee every client need, but providing the tools makes it so they didn’t need to. I hope they continue on this good path.

Feel free to download the custom PhotoShelter Gallery Viewer code, which I’m distributing under GPL. It ‘s done in PHP, and requires Curl, XML, and maybe some other extensions that aren’t always on some PHP installs. To get it up and running, you should be able to just drop it into a web server that supports PHP and enter you PhotoShelter email, password & id of the gallery you want to see, and it wil produce the desired cached code and give you a link to your working gallery.

Also, you can see a working sample of the Gallery Viewer at the AE Fletcher Photography Site.


Leave a Reply