Flickr shortcode (and some nice HDR photos)

I like using creative commons photos from flickr as illustrations on my blog, however, I find it tedious to add all the metadata to satisfy the BY directive in the creative commons license in a consistent manner. Then it’s really nice that flickr has an API where I can automatically fetch that information. I use the shortcode feature of wordpress, so I can use

[flickr url="http://www.flickr.com/photos/stuckincustoms/4099398743/in/photostream/"]

to include an image like below:

or

[flickr pid="4097758830"]

to insert the image below:

or to get another size version i can use

[flickr pid="4088949046" version="Small"]

, like below:


Here’s the code, notice that you need to get an API key from the flickr api site:

<?
/**
  * This piece of code is created by Bård Aase <elzapp@gmail.com>, 
  *  and is licensed under the GPL.
  *  Contact me if you need another license. 
  */
function sc_flickr($atts){
    /**
     * This function gathers information about a flickr image, and complies with the
     * shortcode API in Wordpress.
     * @param $atts array of options
     *   Options:    pid: picture id
     *               version: Small, Medium or Large (default:Medium)
     *               class: class to apped to the <div class="image "> so you can style it
     *               url: You can use an URL instead of a picture id, the pid will be 
     *                     extracted
     */
    $FLICKR_APIKEY="INSERT YOUR API KEY HERE"
    extract(shortcode_atts(array(
    "pid" => $atts[],
    "version"=>"Medium", //setting default value
    "class"=>"centered", //setting default value
    "url"=>""
    ), $atts));
    if($url != ""){
       $e=explode("/",$url);
       $pid=$e[5];
    }
    /* broken into several lines to look better on the blog */
    $sizes_url="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes";
    $sizes_xml=file_get_contents("{$sizes_url}&api_key={$FLICKR_APIKEY}&photo_id=$pid");
    $info_url="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo";
    $info_xml=file_get_contents("{$info_url}&api_key={$FLICKR_APIKEY}&photo_id=$pid");
    $c=new SimpleXMLElement($info_xml);
    $sizes=new SimpleXMLElement($sizes_xml);
 
    $size=$version;
    $un=$c->xpath("//owner/@username");
    $rn=$c->xpath("//owner/@realname");
    $t=$c->xpath("//title");
    $u=$c->xpath("//url");
    $image=$sizes->xpath("//size[@label='$size']/@source");
    $width=$sizes->xpath("//size[@label='$size']/@width");
    $height=$sizes->xpath("//size[@label='$size']/@height");
    $fontsize="A";
    if($height[] > 300 & $width[] > 500){
        $fontsize="C";
    }elseif($height[] > 200 & $width[] > 300){
        $fontsize="B";
    }
    $r=<<<EOT
<div class="image imageclass{$fontsize} {$class}" style="width:{$width[0]}px">
<img src="{$image[0]}" width="{$width[0]}" height="{$height[0]}"><div class="caption">
<span class="title"><a href="{$u[0]}">{$t[0]}</a></span> 
    <span class="author">by {$rn[0]} ( 
    <a href="http://flickr.com/photos/{$un[0]}">{$un[0]}</a> on flickr)</span>
</div>
</div>
EOT;
    return $r;
}
?>

Put that in a file in your theme directory, and call the file “flickr.php”, then put the following into the functions.php-file in the same folder:

require_once("flickr.php");
add_shortcode('flickr','sc_flickr');
Note that this generates the HTML only, the visual style is added to your blog’s css, here’s the CSS I’ve used in this example:
 
.image { position:relative; }
.caption {
  position:absolute;
  bottom:;
  left:;
  right:;
  padding:5px;
  background:transparent url(tr75b.png) repeat scroll left top;
  color:#FFF;
  font-family:"Trebuchet MS";
}
.image:hover .caption {
  background:#000;
}
.caption a {
  color:#CFC;
}
.image img {
  display:block;
}
.imageclassA { font-size:10px;}
.imageclassB { font-size:14px;}
.imageclassC { font-size:18px; }
.image.centered {
margin:auto;
}
.image.floatleft {
margin:5px;float:left;
}
.image.floatright {
margin:5px;float:right;
}

the image referenced in the stylesheet is available from here