Recipe for a Flash-Free Flickr Slideshow in Drupal

Submitted by johanna on May 24, 2011 - 9:38pm
If you're in a Flickr photostream or group pool or photo set, there's a "Slideshow" button in the upper right corner that has "share" options. These share options give you embeddable code that you can drop into content on any site. What's great about it: it's easy to use, and if it's on your site then others can grab the code and share it in viral fashion. What's not so great about it? It's Flash. Flash is notorious for being far less cross-browser/platform compatible and user-accessible than Javascript/jQuery. For example, a jQuery slideshow will work on most smartphones, whereas Flash may or may not. Also, if you're using an embeddable proprietary widget from a third party, you don't have much (if any) control over its styling or how it's presented. If you are comfortable installing Drupal modules and using Views, it's not hard to pull any RSS feed into Drupal from Flickr and use Views to generate a jQuery slideshow. Here is mine (with no custom styling whatsoever), the latest 10 images from the Bird on a Wire Flickr pool (hat tip to Leonard Cohen).

truan has added a photo to the pool:

Evening Grosbeak

Beulah, Colorado

Andreas Hüner has added a photo to the pool:

141

141

stonefaction has added a photo to the pool:

Reed Bunting.

Reed Bunting at Ferryden.

Theresa_Gunn has added a photo to the pool:

Great Tit  (Parus major)

mraadsen has added a photo to the pool:

Mandal roof view

Painterly view of a tiled roof in Mandall, Norway. The birds seem to enjoy it too.

firstbird has added a photo to the pool:

Birdie

firstbird has added a photo to the pool:

Singing alone

firstbird has added a photo to the pool:

Alone under the moon at noon

Bader Al-Qassem has added a photo to the pool:

Oriolus oriolus

صفاري

Maria Rego has added a photo to the pool:

Melhor que uma Rola-brava...

Better than a Turtle dove ...

It doesn't come with any of the nifty viral share features out of the box. Slideshow controls are available, but frankly they are unsightly without custom styling, so I omitted them here. But this slideshow can be custom themed, and it's accessible in older browsers and on many mobile platforms. Here's the recipe:

1. Setup

  • Set up Aggregator: Enable the Aggregator module in core. In the module settings, add the IMG tag to the list of allowed HTML tags. Add the URL for the Flickr RSS feed you want to use. Run cron.
  • Add jQuery.cycle Plugin: Download jQuery.cycle plugin here and copy the files into /sites/all/libraries (just create this directory if it doesn't yet exist).
  • Install & Enable Libraries API: This is in module form and you can get the Libraries API here.
  • Install & Enable Views: If you haven't installed the all-mighty Views, now's the time!
  • Install & Enable Views Slideshow: Here's the Views Slideshow module.

2. Make a View Page or Block

Now you're ready to go into Views. Click "Add New View" and choose "Show > Aggregator item" and it will give you options to create a page and/or a block. I chose to create a block, which could be deployed in any region in the template via Blocks or Context or Panels. Set the format to "slideshow" and you can explore the settings options for Cycle there.

I embedded my block into this post. The Drupal 7 method for embedding a block wasn't super easy to find, so I'll show you my code here:
Basically, the parameters are (1) the module being used, (2) the hook to call, and (3) the "delta" of the block (used to be the block id, but it now seems that you can use the machine-readable name you gave the block--much better). I had to print_r on my $block array to find that the display was stored in the #markup value, though I am sure there's a cleaner way to do it.

3. Enjoy!



Share |

Add new comment