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.

I’ll be reposting everything thing I publish there here about a week apart but there are some great articles in the work for web design and development so check it out.

EMU Marketing

Cut and Paste Digital Design Tournament

Cut and Paste Digital Design Torunament

CUT AND PASTE IS BACK! If you live in the Portland area you see me at the tournament this year. I really wanted to go last year but got caught up with school but I am definitely going this year and will be blogging about it.

For all of you who don’t know what cut and paste is. It pairs off designers against each other in 15 minute “battles” think Dj’s with Wacoms. And slowly advances them through the rounds until a champion is crowned.

typetester compare screen type

TypeTester Test type for the screen.

Typetester is one those things I love to just play around with. It lets you play around with and test different fonts and styles for the web. It really shines because it generates the code for you and lets you run 3 columns of text at once.

Posemaniacs

Posemaniacs

Posemaniacs is one of those sites you never quite stop heading back to for something. All it is if systematic poses of people stripped back to the muscle and uploaded. the site recently went through a redesigna and looks great I would check it out.

Web without words

Web Without Words

Web Without Words is a project where a popular website is stripped of all text and images and replaced with bars stripping it back to the structure and its fairly interesting. The Website is actually very easy to naviagte condisering there is no visible text.