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…
