Our client, Activate Good, currently uses Flickr to upload and organize photos onto the web. While they had a functioning company website, they were looking for a way to integrate Flickr’s display functionalities into their website in a clean and concise way while maintaining the administrative tools and interface Flickr provides. The main features they were interested in with Flickr were the ability to upload photos, give them titles, and sort them into galleries.
To maintain the current work flow and make the transition easy for Activate Good, we choose to work with the Flickr API to create a web application that wraps around Flickr’s code base. As a result of our work, Activate Good’s team is able to continue using Flickr as before, but with a clean public display written within their website that they have full control over.
We used PHP to create the front overview of albums a user can choose from. Once he or she chooses an album to view, our web application uses a mix of PHP and jQuery to load photos into a viewer without the need to refresh the page. The page only initially loads thumbnails reducing the strain on the viewer’s browser, and it swaps out the full-sized images as they click through thumbnails. The design is fully scalable so that it will not break with larger or smaller album sizes. We asked friends to test our site and used feedback to make improvements to the user interface, such as adding hover effects to make the site feel more alive.
Any information that Activate Good’s team changes on Flickr is made immediately visible on the wrapper web application we created. This includes organization into sets on Flickr, the ordering of photos, the ordering of sets, set titles, set primary photos, and photo titles.
We developed while closely following the existing web developer’s site structure so that it was easy for him to change details if necessary in the future. Everything is well documented. All of our styling is limited to a cascading style sheet that he can seamlessly append to his existing style sheets with a single reference changing in our HTML code.
We met with Activate Good’s staff this week to walk them through the process of using our application, and they were very satisfied with the result. As a result of this new photo gallery, the public will have a more personal attachment to the non-profit organization. Activate Good’s staff hopes that this will encourage greater participation and improve funding efforts. They are enthusiastic about working with this application in the future.
Live demo: http://troll.activategood.org/gallery1.php
Flickr that demo pulls from: http://www.flickr.com/photos/sunsurfin/sets/