life | music | photography and everything

syntax highlighting is useful

I wanted to get rid of the Flickr Badge in my Photography section. It is a great service, but does not leave too many options to customize it… The solution lies in Flickr’s API: a powerful tool and great way to display photos in a more individual way than the badge.  A catchy title for the post, such as “We Don’t Need No Stinkin’ Badges” was already used for a good tutorial on the API…
But since I had planned to learn PHP, the described method (with JSON) was of limited use for my purposes. Nonetheless, the tutorial helped me in understanding the material and I decided to write a PHP tutorial on the subject, after I had succeeded with the coding. Consequently, the following text is from a learner’s perspective and addresses PHP learners who want to work with the Flickr API. A certain knowledge of HTML and a glance into the basics of PHP are helpful.

First of all, you have to create the Flickr API Url out of the different parameters: The API key to access Flickr (cf. ‘api_key’), the method you want to use (i.e. what information to pull from Flickr: in this case search photos ) and – depending on the method – the criteria you want to apply to your search.

In the following example, I wanted to search for photos in my photostream (cf. ‘user_id’), to sort them by interestingness (cf. ‘sort’) in descending order and to use serialized PHP as the response format (cf. ‘format’). Other options are described in the API documentation.

In the next step, I defined the variable $params as an array with each key being paired to a value. I defined a new array as the variable $encoded_params, which will be filled with the keys and values (cf. ‘$k => $v’) of the first array – encoded with a linking “=”. Therefore, I started a foreach loop to fill the second array with the encoded parameters as values.

The next step is to define the complete API url  in the variable $url by joining the array values with a linking ‘&’ and using the function implode. The dot is a string operator to link both strings. The function to open the url and read the entire file into a string is file_get_contents… Since I requested the response from Flickr in serialized php I used the function unserialize to get the data of the Flickr photos as PHP values and defined another variable $rsp_obj…

The rest of the code is used to display the data as XHTML: The foreach loop adds ’1′ to the variable $i each run, as long as $i is smaller or equal to 29 (i.e. 30 runs). Furthermore, in $photos each photo within the arrays ['photo'] and ['photos'] is marked with the increasing variable $i as key. Take a look at the Flickr documentation to understand the hierarchy of the data.

The loop creates each image and Flickr page url ($purl and &furl) with specified values, such as ['id'] or ['owner'], which are necessary to display the images as HTML links. Those are defined in $lurl and output with echo.

The code is ready! All there is left to do, is embedding it into a page template, styling it with CSS and displaying it on your blog… Any questions left?

<?php

/*Create API URL*/

$params = array(
'api_key'     => '[yourAPIkey]',
'method'      => 'flickr.photos.search',
'user_id'     => '[yourUSERid]',
'sort'        => 'interestingness_desc',
'format'      => 'php_serial',

);

$encoded_params = array();

foreach ($params as $k => $v)
{
$encoded_params[] = urlencode($k).'='.urlencode($v);
}

/*Open API URL and decode response as PHP values*/

$url = 'http://api.flickr.com/services/rest/?'.implode('&', $encoded_params);

$rsp = file_get_contents($url);
$rsp_obj = unserialize($rsp);

/*HTML output*/

if ($rsp_obj['stat'] !== 'ok')
{
echo ('It does not work');
}

for ($i = 0; $i <= 29; $i++)
{
/*Each array 'photo' in array 'photos' is given the index $i which is increased by 1 each run*/
$photo = $rsp_obj['photos']['photo'][$i];

/*Picture-Url*/
$purl = 'http://farm'.$photo['farm'].'.'.'static'.'.'.'flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'_s.jpg';

/*Flickr-Url*/
$furl = 'http://www.flickr.com/photos/'.$photo['owner'].'/'.$photo['id'].'/';

/*Link-URL*/
$lurl = '<a href="'.$furl.'">'.'<img alt="'.$photo['title'].'" src="'.$purl.'" width="75px" /></a>';

/*Displays HTML code*/
echo ($lurl);
}

?>