Using phpFlickr to Integrate Flickr Photos on Your Own Site

Written By: Jay

- 21 Oct 2006 -
















Description: In this tutorial I will explain how to use the phpFlickr API to interact with Flickr and display photos on a web site.

  1. Summary and Requirements
  2. History
  3. Getting Started
  4. How Does This Work
  5. On Your Own

How Does this Work

I started with a hand full of basic functions that I wanted and then wrapped them in some UI code. I then call my new functions via a switch case based on an action parameter passed in the URL.

$action = rawurlencode($_GET['action']);
$setid =  rawurlencode($_GET['setid']);
$pid =  rawurlencode($_GET['pid']);       
   
    switch($action) {
        case 'photoset':          
            returnPhotos($f,$setid);
        break;
       
        case 'view':
            returnPhoto($f,$pid,$setid);           
        break;
       
        case 'detailview':           
            returnPhotosDetailView($f,$setid);           
        break;     
       
        default:
            returnPhotoThumbs($f,$nsid['id']);
        break;                   
   }

This block of code is the brain of the page. As you can see in the switch case that I've got 3 cases and a default case. The dafault case returnPhotoThumbs($f,$nsid['id']); gets it's values from the very top of the page where we created an instance of the phpFlick class and got some user details.

Getting Photo Set Photos

Now we are going to get a list of PhotoSets and display the primary photo from each one. The function photosets_getList() in phpFlickr.php takes 1 parameter of the userid which is located in $nsid['id'] and return a $photoset object. When we get the $photoset back we'll check to make sure it's not null and then well loop over it and extract the sets one at a time and add the photo and title to a list. To make this a little more reusable and user friendly we are going to wrap the photosets_getList() in another function returnphotosets_getList() which we will pass the $f(phpFlickr object) and the userid.

function returnphotosets_getList($f,$user_id){       
        $photosets = $f->photosets_getList($user_id);       
        if(!empty($photosets)){           
            $html .="
    "
;                       
            foreach ($photosets['photoset'] as $set) {
                $html .= "
  • "
    • ;
                $html .= "$set[title]";
                $html .= "";
            }
            $html .= "";
        }       
        echo $html;       
    }

    As you can see this function is just a wrapper around the phpFlickr function photosets_getList but as you know it is bad to mix UI code with Business Logic so we are calling the base function and then wrapping the results in some UI code for displying it on the page. By doing this we do not need to worry about (too much) when a new version of the phpFlickr is released because we are not altering it in any way. This also gives us the ability to create functions that use a switch case so we can call one base function and then depending on our action we can display the results in a list or grid or dropdown.

    Getting Photos in a Photoset

    The cool thing about the Flickr API and the phpFlickr class is how well it has been thought out and planned compared to other API's. For example now that we have an Array of Photosets we now have a SetID that we will use it to get all of the photos from a selected PhotoSet.

    foreach ($photos['photo'] as $photo) {           
           
        $html .=  "]."'  >";        
        $html .= "$photo[description]]."'>";
}

    You'll notice that I am calling the function buildPhotoURL twice: once in the HREF and once in the Image. I am calling it in the HREF so when you click the photo it will display the photo in medium size and I am calling the same function in the Img to display the photo as a 75x75 pixel square.

    I have trimmed this code snippet for readability and clarity because in my code I am using the rel parmeter to create a LightBox slideshow and I have an OnClick event in a second HREF that makes an Ajax call to get the selected photo. Have a look at the code below to see what I mean.

    foreach ($photos['photo'] as $photo) {           
           
    $html .=  "]."]'  title='".$photo['title']."'  >";
    $html .= "";
    $html .= "]."' onclick='SwapImage(".$photo['id'].",".$photos['id'].");return false;' >";
    $html .= "$photo[description]]."'>";
    $html .= "";
              
}

    You can see that the first HREF has an rel parameter which is calling lightbox with the PhotoSet SetID by using the SetID it lets LightBox know that it need to display any photos on the page that have the same rel parameter.

    The next part is another HREF that has an OnClick event that swaps the images using an Ajax function call using the PhotID and the SetID.

    Lastly is the thumbnail image that is displayed.

    << Previous

    Next >>