Make a Flickr badge with lightbox functionality.

Make a Flickr badge with lightbox functionality. Thumbnail Image

When Josh one of my co-workers was coding the website for The Break, he wrote an awesome Flickr plugin for the framework that opens the medium size image from flickr in a lightbox, the result looks like this.

picture-1

So when he wrote a post on interacting with the flickr api I was interested. After reading the post I figured it wouldn’t be to hard to write my own script to mimic the same effect. So the goals of this exercise are…

  1. Make a function that will use the Flickr api to generate a list of thumbnails
  2. Make it so when the user clicks an image it opens in a lightbox

Example

I’m using this code right now for my blog. You can see it in action at the bottom of my sidebar.

The Code

To kick this off here is the complete code that powers the function. I’ll go over it bit by bit so keep scrolling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

 
function GetFlickr(){
 
$user = array('id' => "26736852@N06");
 
$params = array('method' => 'flickr.people.getPublicPhotos',
                'user_id' => '26736852@N06',
                'per_page' => '12');
 
function request($params){
    $api_key = '#################################';
    $url = 'http://api.flickr.com/services/rest/?' .
           'api_key=' . $api_key . '&format=php_serial';
 
    foreach($params as $key => $val){
        $url .= '&' . urlencode($key) . '=' . urlencode($val);
    }
 
    $resp = file_get_contents($url);
    return  unserialize($resp);
}
 
$photos = request($params);
 
function build_photo_thumbnail($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '_s.jpg';
};
 
function build_photo_original($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '.jpg';
};
 
function build_photo_page_url($p){
     return 'http://flickr.com/photos/26736852@N06/' . $p['id'];
};
 
foreach ($photos['photos']['photo'] as $p){
 
	echo '<li><a href="' . build_photo_original($p) . '" rel="lightbox[flickr]" title="'.$p['title'].'"><img src="' . build_photo_thumbnail($p) . '" alt="'. $p['title'] . '" /></a></li>';
 
 
};
};

Getting Started

Line 1 should be simple, we define a function to contain all of our code and make this easy to call. The next part is all code strippted from Joshs article for making the request to Flickr.

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$user = array('id' => "26736852@N06");
 
$params = array('method' => 'flickr.people.getPublicPhotos',
                'user_id' => '26736852@N06',
                'per_page' => '12');
 
function request($params){
    $api_key = '#################################';
    $url = 'http://api.flickr.com/services/rest/?' .
           'api_key=' . $api_key . '&format=php_serial';
 
    foreach($params as $key => $val){
        $url .= '&' . urlencode($key) . '=' . urlencode($val);
    }
 
    $resp = file_get_contents($url);
    return  unserialize($resp);
}

These are just defining the various variables that we will need to make our api call. We will be using the flickr.people.getPublicPhotos method, its required parameters are api key and user_id. So in our params array we list our method and then our parameters in the order they are listed on the api page. We don’t need to list the api key here even though it is listed in the parameters.

For the request parameter we define out api key. You can get one at the flickr api key page. The rest of the function just builds the rest of the url that will call the api for you. If someone could comment and tell me exactly what this does that would be excellent.

The id variable in the user array can be found using a service called idgetter.

You make your api call with a simple line of code.

$photos = request($params);

Parsing the Data

So now the $photos variable holds all the data from your api call. Here is an example of what mine contains.

Array
(
    [photos] => Array
        (
            [page] => 1
            [pages] => 15
            [perpage] => 4
            [total] => 58
            [photo] => Array
                (
                    [0] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => Munch
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                    [1] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => Rubmle
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                    [2] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => Tick Tock
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                    [3] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => OH Snap!
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                )
 
        )
 
    [stat] => ok
)

So we have an array which is storing a whole lot data. In the next section we will build some more fuctions and a use a loop to build a list of photos we can style with CSS.

Output the HTML

We are going to build 3 functions function build_photo_thumbnail, function build_photo_original, function build_photo_page_url.

25
26
27
28
29
30
31
32
33
34
35
36
37
38

 
function build_photo_thumbnail($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '_s.jpg';
};
 
function build_photo_original($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '.jpg';
};
 
function build_photo_page_url($p){
     return 'http://flickr.com/photos/26736852@N06/' . $p['id'];
};

As you can see these functions are just using the data stored in the array to build the correct URL’s for the photos. Notice the _s in the build_photo_thumbnail function is used to get the square size of the photo. You can find out more about Flickrs URL scheme at their Photo Source URLs page.

Now that we have our functions to the urls written its time for the last piece of code.

foreach ($photos['photos']['photo'] as $p){
	echo '<li><a href="' . build_photo_original($p) . '" rel="lightbox[flickr]" title="'.$p['title'].'"><img src="' . build_photo_thumbnail($p) . '" alt="'. $p['title'] . '" /></a></li>';
};

This is our foreach loop that will use the functions we just defined to generate the HTML code for out photos. You can see I’m hard coding the rel=“lightbox” attribute this will open the photo in a light box just alter this script for your particular brand of lightbox script.

Implementation

To use this script simply call the function from your php document link this.

<ul id="custom_flickr_badge">
<?php GetFlickr(); ?>
</ul>

at the head of your document you will also need to include the file that contains your function. Like this.

<?php include "flickr.php";  ?>

Where flickr.php is the path to the file where the function resides.

Concusion

This took me a long time to figure out but the end result is more pleasing then the default flickr badge. It keeps your visitors on the page and is easy to style via the id=”custom_flickr_badge” attribute.

If anyone has any issues with the script I’ll be happy to help.

6 Comments

6 Comments