Recipe for a Flash-Free Flickr Slideshow in Drupal

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. Mine is above (with no custom styling whatsoever), the latest 10 images from the Bird on a Wire Flickr pool (hat tip to Leonard Cohen).

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.

3. Enjoy!



Comments

Image-only slideshow

This is great. Thank you!

Do you know how to have just the image with no text? I only seem to be able to get the image at all by using the field 'Aggregator: Body', which gives me too much.

Many thanks

Deb

 Hi Deb,Offhand, I don't know

Hi Deb,

Offhand, I don't know of a way to use Aggregator or Views to strip the incoming feed items down to only the image. I think you could try the Feeds module for this: http://drupal.org/project/feeds/

I have a good friend/colleague who uses it for content migration. I believe it will let you map incoming feed elements to existing Drupal content elements.  If you give it a try, let me know how it goes.

Thanks!

Johanna

Add new comment