Custom Yahoo Pipes/ Flickr Slideshows For Your Blog


We’ve previously played with various Yahoo Pipes to generate Flickr-based photostreams and photologs. This Tubetorial gives a variation that produces a slideshow. That is, a single slide player will be embedded in a webpage/ blog post and display all images in that footprint.

While you can take a straight photostream and use a variety of web-based slideshow services, I’ve used a specific set of tools:

  1. Flickr – from within Yahoo Pipes, to grab images.
  2. Yahoo Pipes – to control the Flickr stream.
  3. SplashCast – to build and display the Flickr slideshow.

The reason for this is that using Pipes allows us to add a variety of customizations. We’ll just cover the basics for now and get into an advanced variation in another Tubetorial.

Now, the pipe is a lot easier to build than it is to describe, so don’t be scared off by the wordy post below.

Process

This is the general process you can follow to create an automated slideshow in SplashCast from Yahoo Pipes and Flickr.

  1. Use the Flickr module in Yahoo Pipes to grab X images tagged with tag Y. Initially, I’m getting 50 images tagged “dogs”.
  2. Run the Pipe.
  3. Save the dynamically-generated RSS feed URL for the Pipe.
  4. Import the feed into SplashCast Media’s player.
  5. Publish the SplashCast show.
  6. Create a SplashCast channel, which lets you create a SplashCast player of your preferred size.
  7. Add the show you created to the channel’s show list. (You can add more later; I’ve added only one.)
  8. Place the player’s HTML embed code on your web page.
  9. View and enjoy.

Since the SplashCast show is based on a feed, it is supposed change any time the feed changes – provided enough time has passed between viewings. So if someone adds new images to Flickr tagged as “dogs”, viewing your SplashCast slideshow again should automatically show new images.

On the customized Pipe, we do almost the same thing:

  1. Use the Flickr module.
  2. Add a Text Input module to allow easy changes to which Flickr tags to search for.
  3. Add a Number Input module to specify how many images maximum for our Flickrstream.
  4. Run the Pipe with desired parameters. (Defaults will show.)
  5. Save the dynamically-generated RSS feed URL for the Pipe. Each time you change the tag + number parameters, Pipes will generate a different RSS URL. So make sure you copy the correct link.
  6. Import the feed into SplashCast Media’s player. You’ll need to create a new “show” each time you want to apply a new RSS URL.
  7. Publish the SplashCast show.
  8. Create a SplashCast channel and player.
  9. Add the show to the channel.
  10. Place the player’s embed code on your web page.
  11. View and enjoy.

The second Pipe just makes it easy to query Flickr for different images without having to edit the Pipe each time you want to change tags. This way, you can create one pipe, search for a variety of Flickr images, then create a separate slideshow for each.

Yahoo Pipes modules used

Both Pipes are relatively simple, compared to a few I’ve done previously. These are the modules used here:

  1. Flickr
  2. Text Input (2nd pipe)
  3. Number Input (2nd pipe)
  4. Pipe Output

Videos

There are 5 parts to the video series for this Tubetorial:

  1. Part 1 – Create and run a simple Flickr Pipe.
  2. Part 2 – Create and preview the SplashCast show.
  3. Part 3 – Create the SplashCast channel and player.
  4. Part 4 – Embed the SplashCast player code on your blog.
  5. Part 5 – Refine the Flickr Pipe to allow easy change of image tag and quantity.

The videos are contained in the single SplashCast player below, in frames 2-6.

Important links

The two Yahoo Pipes that were created for this Tubetorial are available for you to clone and tweak:

  1. Yahoo Pipe 1 – Simple Flickr slideshow.
  2. Yahoo Pipe 2 – Customized Flickr slideshow.

Notes

A few points of interest:

  1. SplashCast has two types of slideshows: one type is built manually, the other is generated automatically with an RSS web feed. This tuebtorial uses the latter type.
  2. You have less control over the display attributes of an RSS-driven SplashCast than a regular SplashCast.
  3. Even though you might query Flickr for “dogs” from within the Yahoo Pipes Flickr module, if items are tagged incorrectly at Flickr, you may get incorrect pics. This could result in NSFW (Not Safe For Work) images as well.
  4. If you change the maximum number of items in the photostream, you will need to recreate the SplashCast slideshow.
  5. The RSS-based SplashCast slideshows may accumulate images over time. So despite setting a limit of 50 images in our first example, the actual slideshow could contain more.
  6. You can embed the SplashCast player in your website/weblog’s navigation area instead of on a page. That way, it’s always visible
  7. It’s ideal for displaying your family, travel or other photos. Just be sure to use a very unique tag on your Flickr images so that when you query for them in the Yahoo Pipe, you’ll get just your pics.

Tubetorial

4 Comments

Your email address will not be published. Required fields are marked *

  1. Nice, thanks. It’s a pity that Yahoo pipes of Flickr can’t produce a feed for image tags for ‘your own’ photos. The service can get every ones photos of dogs. But if I want to produce a feed of dog photos “I” have taken, it is impossible.

    This means that we can mashup generic content but not specific content. Guess that is a feature request to Yahoo 🙂

  2. Hi DC, are you sure about that? See I don’t have enough Flickr images in my stream yet to try. I do know you can get your stream’s feed containing all your photos, dog and cat. Not sure if you can get just your dog photos or just your cat photos.

    So it’s not a Yahoo Pipes issue either way; it’s a Flickr issue. Pipes will take any feed you give it.