Adding Flickr Photos To Your WordPress Blog

Many Ways To Integrate Flickr With WordPress

Over the last week, on behalf on a blogging client who has lots of pictures on Flickr, I have been researching different ways on integrating a series of Flickr photos into a WordPress blog. I was looking at two methods of displaying pictures: galleries and slideshows. A gallery displays a number of small thumbnail images and the visitor can click on the thumbnail and a bigger picture is displayed. With slideshows only a single normal size picture is displayed at any one time and the slideshow moves on to the next picture every few seconds.

After some research on Google I tried the following integration methods:

• Flickr’s own slideshows – using cut and paste of HTML code from Flickr
• Various WordPress plugins for Flickr – inserting galleries or slideshows using WordPress Flickr Manager, Flickr Gallery, FlickrRss, Flickr Widget, Flickr Photo Album, WP-Flickr and Flickr Slideshow Plugin

Flickr’s Own Slideshow

With this approach you do most of the work in Flickr and then cut and paste some HTML to include the slideshow in your blog. It looks like this

The steps to make a Flickr slideshow are:

1. Log in to your Flickr account
2. Select the photos of interest to make a collection
3. Click the Slideshow button
4. Click the Share This button
5. Select the HTML
6. Paste the HTML into your post on WordPress

My client had a few issues with the Flickr slideshow. The main issue was the lack of captions. Despite many requests to Flickr there is no way to have captions switched on by means of a parameter. It is in the control of viewer (if they can work it out) to switch on “Information” but as well as captions this displays other information such as who took the photo and the date. This tended to spoil the visual appearance of the photo.

The other critical issue was that when he added new photos he did not want to have to rebuild the slideshow and repeat the ‘cut and paste’ exercise.

Flickr Gallery WordPress Plugin

The most appealing of the galleries was that produced by the Flickr Gallery WordPress plugin. This delivers the photos as thumbnails and uses a Lightbox to display them full size. It looks like this:

The steps to build the gallery were:

1. Log in to your Flickr account
2. Select the photos of interest and give the group a unique tag
3. Back in wordpress paste a single line into your post that uses the flickr-gallery shortcode and refers to the tag. For example [flickr-gallery mode="tag" tags="bahamas" tag_mode="all"]

This solved the problem of captioning and made the updating stratghforward: after uploading a new photo to Flickr all you need to do is tag it and it will appear on your WordPress site without having to make any changes. This plugin did the job well for a gallery but what my client wanted was the ability to display his photos as a gallery or a slideshow. Also the plugin also did not work when other Flickr plugins were installed.

Display of Flickr Photos in a Gallery OR a Slideshow

In the end I came up with a solution that meets his requirements of being able to display either a gallery or slideshow, is easy to configure, allows control over captioning, is automatically updated when new photos are uploaded to Flickr and tagged, does not conflict with other Flickr plugins and finally, allows multiple galleries or slideshows per page.

Setting up a gallery or slideshow involves two steps:

1. In Flickr (or using the WordPress Flickr Manager plugin), you tag the photos with a specific ‘tag’ such as ‘bahamas’ in my example.
2. On your blog you edit the post and insert a single line of PHP where you want to display your photos.

Displaying A Flickr Gallery

<?php require_once ('flickr_show.php'); echo flickr_show("bahamas","items=10"); ?>

This example will display a gallery of up to ten photos in my flickr account that are tagged with ‘bahamas’. It looks like this

Displaying A Flickr Slideshow

<?php require_once 'flickr_show.php'; echo flickr_show( "bahamas", "type=slideshow&items=10&delay=5"); ?>

This example will display a slideshow with captions of up to ten photos in my flickr account that are tagged with ‘bahamas’ with a delay of 5 seconds between slides. It looks like this

Nassau Cruise Ship

Steel Band at Atlantis

Atlantis Aquarium

Grand Bahama Hotel Grounds

Me Chilling

Grand Bahama Downtown

Tropical Blue Sea

Cool Art in Hotel Room

Easy To Use But Difficult To Install

While this solution works well, it is relatively complicated to install: I needed to install two PHP files, two javascript files, a jQuery plugin as well the Exec PHP WordPress plugin. This required me to FTP some files on to the server in the right places for it all to work properly. I did this for my client and he is happy. But how can I make the installation easier if I want to use my Flickr Slideshow on other blogs?

The answer is obvious: I need to turn my custom PHP code and javascript into a WordPress Plugin.

New Flickr Plugin For WordPress

The WordPress plugin will do all the installation tasks meaning that once the plugin is installed all the user needs to do is use a shortcode.

Using the Plugin

At blogging time: all you will need to display a gallery of Flickr photos tagged with bahamas is:

[slickr-flickr tag="bahamas"]

If you want to display an automatic slideshow of up to ten photos tagged with bahamas without captioning with a slide transition delay of 4 seconds then use

[slickr-flickr tag="bahamas" items="10" type="slideshow" delay="4" captions="off"]

Plugin Settings

To configure the plugin the minimum you need to do is enter your flickr id – this is the 12 character code that appears in your browsers URL when you click the “You” link when logged in to your Flicker account (it will look something like 47103510@N00) or alternatively use the Flickr Id Lookup facility.

However, you will also be able to change the defaults for:

• type: allowed values are “gallery” or “slideshow”: initial default is “gallery”
• items: the maximum number of photos to display: initial default is 20
• captions: allowed values are “on” and “off”: initial default is “on”
• delay: the delay in seconds between slide changes: initial default is 5

You will also will be able to change colors and font simply by editing the plugin’s CSS or adding a few lines for custom.css if you are a Thesis theme user.

My goal is to release the plugin within two weeks. About two days to write the plugin and the rest of the time on installation documentation, faq and a training video on how to set up the plugin.

Final Word on The Slickr Flickr Plugin

Today is the 28th February and the plugin has been completed and submitted to WordPress for inclusion in their plugin directory. I hope to put it live and make it available for download early next week.

Check out the Slickr Flickr Plugin Home Page

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Tagged as: Flickr, Gallery, slideshow