Tech Tips

ExpressionEngine - Display Flickr stream with FeedParser

Recently, a Flickr-powered photo gallery stopped working on a site that we developed. Investigating the problem a bit further, it appears that the add-on we were using (Brett Dewoody’s “Flickr” plugin for ExpressionEngine) had stopped working – apparently due to recent changes to the Flickr API. As the developer of the plugin has announced that he is no longer updating it, so we needed to find another way to do the same thing.

Fortunately, it turns out that the (excellent) FeedParser plugin can do the same thing – read on for the details. We’ll also cover how to display more than 20 images from Flickr via RSS, working around a limitation of their default RSS feeds.
 

Aside from ExpressionEngine itself, there are a few other pieces of software needed for this setup. First, you’ll need the FeedParser plugin (to fetch the data from Flickr & display it via an ExpressionEngine template) – and you’ll need the MX Calculator plugin (to handle pagination, more on that later). You’ll also need to obtain an API key from Flickr, which you’ll need to apply for at https://www.flickr.com/services/apps/create/apply/.

Once you’ve received the API key and installed the plugins, it’s time to create a new template and paste in the code below:

{if "{segment_3}" == ""}{redirect="{segment_1}/{segment_2}/1"}{/if}

This code checks to make sure that the 3rd URL segment {segment_3} isn’t empty, since that’s what we’ll be for page numbers. If it is, then it redirects you to the same template, but with “/1″ at the end of the URL, which will display the first page.

{exp:ajw_feedparser 
        url="https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=MY_API_KEY&per_page=50&format=feed-rss_200&user_id=MY_USER_ID"
        cache_refresh="1"
        limit="1"
        itempath="/rss/channel/flickr:pagination"
    }

        <h3>Page: {segment_3} of {@pages}</h3>
        
        {if "{segment_3}" != "1"}
            <a href="/index.php/{segment_1}/{segment_2}/{exp:mx_calc expression='{segment_3}-1'}">PREVIOUS</a> |
        {if:else}
            PREVIOUS |
        {/if}
        
        
        {if "{exp:mx_calc expression='{segment_3}+1'}" <= "{@pages}"}
            <a href="/index.php/{segment_1}/{segment_2}/{exp:mx_calc expression='{segment_3}+1'}">NEXT</a>
        {if:else}
            NEXT
        {/if}

{/exp:ajw_feedparser}

The first part to note is the url parameter of the opening exp:ajw_feedparser – rather than using Flickr’s default RSS feed (which is limited to 20 images), we’re using a URL that makes an API request and returns the results in RSS format (specified by the “format=feed-rss_200″ part). It’s also set to get 50 images per page/request (the maximum), so you’ll need pagination if there are more than 50 images in the photo stream you’re trying to embed.

You’ll need to replace the two bolded portions with your actual information: replace “MY_API_KEY” with your actual API key, and replace “MY_USER_ID” with your Flickr user ID. To find your Flickr user ID, login to your flicker.com account, click the “You” menu, and then click “Photostream” – now look at the URL, your user ID is the string of numbers and letters that comes after “https://www.flickr.com/photos/”, not including the “/” at the end. To make sure you have the right details, just copy-past the URL into a browser – if it works, you should see bunch of XML code (or the images themselves, if you’re using Firefox).

This first block of code is only used for pagination (we’ll use a second feedparser loop to get the actual photos), hence the “itempath” parameter  – if it isn’t specified, then FeedParser will fetch the images, but won’t let you access the number of pages and other pagination info. The code within the loop should be fairly self-explanatory if you’re familiar with EE templates: we display a heading with a page number, with two conditionals below that. The first one checks to see if the 3rd URL segment (which we’re using for page numbers) is “1” – if not, it displays a previous link (using the MX Calc plugin to calculate the previous page, by subtracting 1 from the current page number in {segment_3}); if it is, then the “PREVIOUS” link is disabled.

The second conditional does the same, but in reverse, for the “NEXT” link: it checks to see what the next page would be (by adding 1 to the page number in {segment_3}), then checks to see if that number is less than or equal to the total number of pages (from the Flickr RSS data). If yes, then the “NEXT” link is displayed – if not, then that means you’re on the last page & the “NEXT” link is disabled.

Next, below that (below the closing {/exp:ajw_feedparser} tag), paste in the following code – this will display the actual images:

{exp:ajw_feedparser 
    url="https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=MY_API_KEY&per_page=50&format=feed-rss_200&user_id=MY_USER_ID&page={segment_3}"
    cache_refresh="60"
}

    <a href="{media:content@url}" title="{media:title}"><img title="{media:title}" src="{media:thumbnail@url}" /></a>

{/exp:ajw_feedparser}

The “url” parameter is largely the same as in the first block of code, but with one difference at the end: “&page={segment_3}”. That is the code that allows you to use URL segments & the pagination code above to control which page of the Flickr results is displayed. The output is pretty barebones in this example, it just displays a thumbnail of each image & a link to the fullsize version. There are many other pieces of information you can display, however, including the image titles, descriptions, tags, etc – to see a list of all the available tags/fields in the RSS feed, just add the following parameter to the exp:ajw_feedparser tag:

debug=”true”

That will show you a full list of the tags available in the RSS data. There’s also a Flickr example on the FeedParser devot-ee page, which shows some of the other information you can add – the example uses Flickr’s default RSS feed, but all of the same fields/tags are available through the API requests used here.

And that should do it – you’ll still probably want to add some styling, etc, to the pagination links and the display of the images, but (assuming nothing went wrong) you should now have a working ExpressionEngine template that displays images from a Flickr feed.

Comments