A picture is worth a thousand words. Seeing is believing. Image matters.
For a while we’ve been wanting to find ways to add more visual appeal to individual Plings listings. We think that having a photo next to each activity listing could make a difference when it comes to young people discovering, becoming interested in, and hopefully getting involved in, new activities.
The main Plings website has had the option of attaching images to activities by way of a Flickr Machine Tag for a while now, but of course, images on an activity-by-activity basis are, at the moment, few and far between. So, for the launch of the new Plings.net, Ben Webb took up the challenge of creating a simple mechanism for attaching ‘generic’ images to activities based on their tags.
Challenge 1: Finding images to use
Gathering images of every possible activity in Plings is a big task. We needed a solution that allows us to incrementally build up a collection of images. And we need images that we have permission to use (no copyright restricted images!). Fortunately, many of the images on the photo sharing website Flickr have been uploaded under Creative Commons licenses that give permission for their re-use.
Challenge 2: Collecting the images
Once we found images on Flickr that could be used against types of activities (e.g. Football, Canoeing etc.) we needed a way to tag them as such. Flickr doesn’t offer an easy way to tag other people’s Creative Commons photos in the way we needed, so, we turned to trusty social bookmarking service Delicious.
Using delicious we can bookmark the pages that contain photos on Flickr, and can add our own category tags to our bookmarks – choosing tags that match the tags which activities are given.
Challenge 3: Displaying the images
Fortunately both Flickr and Delicious have useful APIs that we can use to get information back from them. So, whenever an activity page on Plings.net is visited, Ben’s scripts looks at the categories assigned to the activity, and checks to see if any photos have been tagged on the Plings delicious account with these activity categories/tags. If so, by looking at the URL of the tagged page, and extracting the Flickr Photo ID, the script can fetch information about the photos referenced, checking that they are licensed in ways that allow us to re-use them, and then displaying them on the activity page.
If there is suitable machine tagged photo on Flickr for this specific activity, then that takes precedence over the general images.
If no photos are found, then a collection of general placeholder images are used to make sure that pages don’t end up looking dull.
A distributed – re-usable system
Both the bookmarks, and photos are public online resources – and so this solution could be used by anyone else providing information on positive activities.
If you’re interested in the code we’ve used, just get in touch. We’ll also be thinking about how we might add images more directly to the Plings data feeds in future – and welcome and thoughts and reflections on that.
Many thanks to Alice at Substance who spent some time finding the relevant images on Flickr
A couple of things in relation to the tags:
1 – We are starting to match up the tags in plings and our photo tags in Delicious, to manage the missing gaps
2 – In relation to this, there is a slight fail in that Delicious doesn’t allow a tag that is two words – so “football training” would have to be “footballtraining” or “football_training” – so that is something to look into
3 – We may also want to find more generic images for the categories – and therefore alter the script to default to that, should no tag be found
All good stuff!
We have a slight issue at this very moment in that we seem to have “throttled” either the Delicious or Flickr API with all our calls. So – just fixing that for the moment.