XML Flash Slideshow v4 Help    |    Support Home    |    DWUser.com Home  Download Help PDF (29MB)    |    Search:

Integrating Flickr Collections (PHP, Coldfusion)

Flickr users who have Pro accounts can use the Organizr to organize photos using Collections, each of which contain several Photosets.  Collections can be leveraged to create entire multi-gallery slideshows dynamically, letting clients add or remove galleries from a slideshow as desired.

To provide this level of integration, you'll need:

  • The Pro version of the XFS v4 software
  • A Pro Flickr account that contains a Collection with one or more Photosets in it
  • Server Support:
    • PHP Version: PHP 5 support* on your server with CURL and SimpleXML extensions enabled (available on almost all PHP installations)
    • Coldfusion Version: Coldfusion installation with CFC support; the slideshow holder page must be a .cfm file.
  • Rudimentary experience working with PHP or Coldfusion
  • A free Flickr API Key (learn more about integrating with the Flickr API and getting an API Key here).

First, you need to create the slideshow you'll be integrating the Flickr collection into.  You must insert this slideshow into a PHP file or Coldfusion file; it cannot be inserted into a plain .html file.   Insert a slideshow as you normally would, but don't create any galleries in the Image Galleries section.  Instead, add a single new data source in the External Image Data section.  Associate it with <New gallery created at runtime> (the default) and as the URL enter    temporaryDataURL   .  (You'll replace this value with a dynamically-generated value momentarily.)  Save and exit the wizard so that the new slideshow is inserted into your page.

Next, you'll need to gather the following information about your Flickr Account and the Collection you're going to use with the slideshow:

  • Your Flickr User ID.  This can be found by going to your Photostream page and noting the URL.  It will look something like this:
    http://www.flickr.com/photos/51666735@N07/
    The bolded portion (what appears between the final two slashes) is your User ID.
  • The ID of the Collection you want to use for your slideshow.  This can be found by going to the collection's homepage and noting the URL.  It will look something like this:
    http://www.flickr.com/photos/51666735@N07/collections/72157624983488655/
    The bolded portion (what appears between the final two slashes) is your Collection's ID value.

The next step is language-specific.  Jump to the appropriate section based on which server language you're using.

PHP Integration

Having gathered this information, switch to code view of your page and add the following PHP code above the slideshow code block:

Update the user ID, API key, and collection ID values near the bottom with your Flickr information.  (Note - While not required, Flickr API calls should be cached on high-traffic sites [as noted in the code].)  Having done this, locate the ... xml:'....,temporaryDataURL' ... value in your slideshow's code block just below.  Replace temporaryDataURL with the following code:

<?php echo($xfsURL); ?>

If you now upload and run the slideshow, you should see that all of the photosets in your collection are dynamically displayed in the slideshow as separate galleries.

Coldfusion Integration

Note: Thanks to kind XFS v4 user Boyd who provided the original raw port of this code.  The version found here is slighly modified to allow for greater extensibility.

Having gathered the above information, now download the flickr.cfc Coldfusion component file available at https://gist.github.com/2f9c691f92a1c40850f1 and save it in the same directory as your HTML page.  It is important to place it in the same folder as your .cfm slideshow page!

Now switch to code view and add the following Coldfusion code above the slideshow code block:

<cfinvoke
    component="flickr"
    method="getPhotos"
    userID="PLACE_USER_ID_HERE"
    apiKey="PLACE_API_KEY_HERE"
    collectionID="PLACE_COLLECTION_ID_HERE"
    returnvariable="xfsURL" />

Replace the designated strings with the respective User ID, API Key and Collection ID values you located earlier.  Having done this, locate the ... xml:'....,temporaryDataURL' ... value in your slideshow's code block just below.  Replace temporaryDataURL with the following code:

<cfoutput>#xfsURL#</cfoutput>

If you now upload and run the slideshow, you should see that all of the photosets in your collection are dynamically displayed in the slideshow as separate galleries.

* Note: The code above can easily be translated into other server-side languages.  If you translate the code, please let us know so we can post it for other users to use too.