Blog: Photos

Module Lets You Upload Photos to Your Site and Flickr at the Same Time

Wouldn’t it be cool if you could upload as many images as you’d like to your site without worrying about your bandwidth? Or even better, if you could automatically share the images you upload to your site with an image sharing service like Flickr, and then have these photos displayed on your website but hosted on Flickr? 

That’s exactly what we did last week for the Stand Up Speak Out campaign. Using Drupal and the Flickr API, I created a small Drupal module called Flickrup that does this – all you have to do is enable it and configure it. It helped us easily display photos from many of the thousands of events that took place around the world on their individual event webpages. Here’s what it looks like:

Here’s what the module can do:

• Upload images to your Flickr account and link them to specific content
• Automatically display images along with your website content
• Define a global tag for all your uploaded images
• Define tags per content types, which lets you automatically tag images using node parameters and location data if its available (for example, you can tag all images with 'yoursitename' event[nid] country)
• Add additional custom tags for each upload

Here’s how it works:

• Uses phpFlickr for Flickr integration and automatic uploading 
• Uploads images first to your server and then to Flickr, and gives you the option of removing local files after they've been sent to Flickr
• Automatically tags your pictures for your specific content on your website, which allows appropriate images to be retrieved and displayed on the appropriate pages (this is optional)

And it works! Thousands of photographs were uploaded last week during the Stand Up Speak Out campaign.

Below I’ll walk you through using the Flickrup module step by step.

Two Widgets We Used to Show Off Photos on StandAgainstPoverty.org

At the height of the UN Millennium Campaign's Stand Up Speak Out campaign last week, a ton of photos were uploaded to StandAgainstPoverty.org in just one day. So many in fact, that at least one photo from the campaign’s account made it into the photos featured on Flickr under “everyone’s photos.” That’s hard to do and shows the fast rate people were uploading photos through the Flickrup module that Jose built (more on that later in the week).

With so many photos being uploaded and with so many of these photos containing important metadata like the location where the photos were taken, we really wanted to display the photos in an organized way that took advantage of all available data. So we started brainstorming. 

Flickr.com lets you make a Flickr map of your photos, but photos can only be mapped if they've been geotagged using a special machine tag that includes latitude and longitude of where the picture was taken.  This is limiting, and unless you do the geocoding yourself (which can be a little hairy but not too bad), you need a way to geocode the pictures when pulling them back out of Flickr. With such a fast paced campaign like this one, we wanted to use a more straightforward approach. 

That’s when Trippermap came in. Trippermap is a flash widget that gets around the need to tag your photos with latitude and longitude. If there are other location tags on a photo like the name of a country, city, and state or a country and state/province, then Trippermap uses this information to geocode the photo itself and place it on a flash map that you can then embed in your site.  Check out this one from the Stand Up Speak Out campaign:

The connection between our main blog and Flickr (that really big photo sharing community) just got stronger and easier with Flickrstickr, a new AJAX based module for Drupal that makes adding photos from Flickr as simple as dragging and dropping – no code at all!

Try out a demo on a sandbox here: http://www.developmentseed.org/flickrstickr

1) Click try it.
2) Write in a title of your choice
3) Click down on "flickr image insert"
4) Type a flickr username or a tag, or both, then click "Search"
5) Wait a couple seconds...
6) Images should then appear. Select the insert size and the popup size, then click and drag the one you want into the textarea. The insert size is the size of the image you want to show up in the post. The popup size is the size of the image you want to popup when you click on it in the post.
7) Write some text if you want
8) Hit submit!
9) Props to Marton and Aron

We just launched a 'photo petition' for Planed Parenthood's campaign against Target on their SaveROE.com site. Check out the pictures telling Target to stop denying medication to women. You can add your own picture telling Target to stop messing up here.

It is pretty cool, playing off other successful photo speak-out campaigns like FUH2 | Fuck You And Your H2 with the "Hummer H2 salute" of flipping off an H2, and the Sorry Everybody which documented the post 2004 election picture gallery of Americans
offering apologies to the world for George Bush's re-election.

Flickr now finally offers the long awaited photo printing,