elblogg

Flickr shortcode (and some nice HDR photos)

Nov 2009

Categories: misc; programming
Tags: api; php; programming
Discussion: one comment; discuss!; Save on delicious

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

^?View Code PHP

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

to include an image like below:

Crossing the Bridge into Old Lyon by Trey Ratcliff ( Stuck in Customs on flickr)

^?View Code PHP

[flickr pid="4097758830"]

to insert the image below:

A View from the Ranch in Argentina and Guest Hosting on This Week in Photography by Trey Ratcliff ( Stuck in Customs on flickr)

or to get another size version i can use

^?View Code PHP

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

, like below:

The River Runs Through the Andes by Trey Ratcliff ( Stuck in Customs on flickr)

The Alien Garden I Found on that Away Mission by Trey Ratcliff ( Stuck in Customs on flickr)

Tokyo Road by Trey Ratcliff ( Stuck in Customs on flickr)

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

^?View Code PHP

<?
/**
  * 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[0],
    "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[0] > 300 & $width[0] > 500){
        $fontsize="C";
    }elseif($height[0] > 200 & $width[0] > 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:

^?View Code PHP

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:

^?View Code CSS

 
.image { position:relative; }
.caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  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

One Response to “Flickr shortcode (and some nice HDR photos)”

elblogg » Blog Archive » Flickr shortcode plugin for Wordpress November 20th, 2009 at 07:02
[...] this week I wrote about how you can add a shortcode to the functions.php to make it easier to use Creative Commons images on your blog, while always remembering to put in [...]

M/S Lofoten in Lofoten

Flickr shortcode (and some nice HDR photos)

One Response to “Flickr shortcode (and some nice HDR photos)”

Leave a Reply