Make a Flickr badge with lightbox functionality.

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.

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…

Make a function that will use the Flickr api to generate a list of thumbnails
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.

 
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.

$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.

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.

 
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.

X-Ray Freebies

A friend found these at a local store that recycles art materials and gave them to me to scan before she used them for a project.

Feel free to use these in any project commercial or otherwise. Leave me a comment if you do use it please.

udc_xray_freebies
Easy Stencil Effects

Brief Background
My main source of insertion for the Inauguration Poster came from the Shepard Fairey “Hope” Poster we have all seen so much of. Here is the final version of my poster.

This is a quick tutorial on how I created the stencil effect for the poster.

Keep On Reading…
Designers vs Developers at EMU Marketing

After reading through this article over at Vitamin Features, i thought it would be a good idea to answer the questions as a designer who has to work with developers on a very regular basis.

1. Would I be a better designer to work with if I knew coding myself? Do developers appreciate knowledgeable designers?

The designers at EMU Marketing code our own pages in XHTML and CSS this takes the pressure off of the developers to make things “look right” and lets the designers have control over the entire visual appeal of the site.
Keep On Reading…
Gifts for Designers

With Christmas just around the corner and people asking me what I want thought it might be fun to do a post on some great things targeted at designers.

Pantone Mugs

These great Pantone Mugs would be an awesome gift but at 130$ they might be a little to much. But I have heard of a few places that sell them individually.
Keep On Reading…