Flickr provides a neat little snippet of javaScript to supply various image galleries direct to your site – a so-named Flickr badge.

So if your gallery is on Flickr – rather in your WordPress, which has its own gallery shortcode – a shortcode in the blog post content can be used to embed a gallery of thumbnail images, which is also a good way to demonstrate the various usages of WordPress shortcodes.

The HTML for a flickr badge looks something like this:-

<div class="flickr_badge"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=m&layout=h&source=all_tag&tag=fish"></script></div>

And the parameters work like this:-

count integer 1-10. Default is 10.

display string ‘latest’ or ‘random’ Default is latest.

layout string h, v, x - Photos are listed horizontally, vertically, or no style. Default is horizontal.

source string user, user_tag, user_set, group, group_tag, all, all_tag

Source implies which ‘account’ the photos come from:- a specified user, a user set, a group, or all users, then filtered by tag if required. Further parameters may then be required, user(ID string) tag (string), group (integer), and set (integer, the url …/sets/1234567/).

size string s, t, m s stands for square (cropped, not small…), t for thumbnail, and m for medium. t = thumbnail is the default.

(idgettr is very useful for figuring out user IDs and the IDs for photosets, groups etc.)

WordPress Shortcodes

A shortcode has a “handler function” – which is integrated into the code by calling the function add_shortcode(). The purpose here is to supply the various parameters for our Flickr badge as parameters of the function – the query string for the Flickr call is then constructed and the javascript code output to the page.

In functions.php

function flickr_badge_shortcode($atts){

//Here's our defaults
$query_atts = shortcode_atts(array('count' => '6', 'display' => 'latest', 'source' => 'user', 'size' => 't', 'user' => '', 'layout' => 'x', 'tag' => '', 'group' => '', 'set' => ''), $atts); 

 	return sprintf('<div class="flickr_badge"><script src="http://www.flickr.com/badge_code_v2.gne?%s" type="text/javascript"></script></div>
', http_build_query($query_atts));
}

add_shortcode('flickrbadge', 'flickr_badge_shortcode');

Provided you have PHP5 on the server, http_build_query() is the quick and easy way of building a query string from an array – and it’s urlencoded….

Note that the empty parameters group, set etc. are required in the defaults – otherwise nothing gets passed to the constructed url via shortcode_atts().

So now, in a post content you can apply the shortcode tag:

[flickrbadge count="4" layout="h" display="latest" size="t" source="all_tag" tag="fish"]

And you should get a nice gallery of Flickr images for users to check out – once you’ve added some CSS to style the images (note the possible uses of the layout parameter here).

This example was of the selfclosing shortcode tag – but you can elaborate a bit, to inject more content into the shortcode function. The simplest example would be to give the gallery a custom title.

Again in functions.php

function flickr_badge_shortcode($atts, $content=NULL){

//Here's our defaults
$query_atts = shortcode_atts(array('count' => '6', 'display' => 'latest', 'source' => 'user', 'size' => 't', 'user' => '', 'layout' => 'x', 'tag' => '', 'group' => '', 'set' => ''), $atts);

return sprintf('<div class="flickr_badge"><h3>%s</h3><script src="http://www.flickr.com/badge_code_v2.gne?%s" type="text/javascript"></script></div>', $content, http_build_query($query_atts));
}

add_shortcode('flickrbadge', 'flickr_badge_shortcode');

And would be called from the post content with opening and closing shortcode tags:

[flickrbadge count="4" layout="h" display="latest" size="t" source="all_tag" tag="fish"]Here’s the latest fish[/flickrbadge]

Caution!
Best to avoid camelCase notation in the attributes – the regex that the content is passed through to locate shortcodes is case-insensitive.
Always remember to use return in the handler function and not echo (in this example sprintf, not printf). It’ll appear on the page – but not in the right place…

WordPress shortcodes are relatively simple in concept, but can be a bit fiddly in practice, keeping track of the default parameters and the use of shortcode_atts() just needs a bit of thinking about sometimes…