Title: Showcase Flickr photos on your site

Date: Tuesday, May 21, 2013

I want to share a quick and very powerful technique I use when I want to get some Flickr Thumbnails pulled onto a page in PHP. This uses the Open source PHPFlickr API which you will need to download and include in your site.

What this does, is create a simple interface for you to select and pull out the Flickr images you require in the format you require, be it small Thumbnails, full sized images or just text with links. This means that any time photos are added in the Flickr stream you are using, they will automatically get updated on your site.

The aim is to be able to showcase some photos on your site like this (example image).

Flickr Example

Also! You will also need to login in to Flickr and get an API key in order to use Flickr’s API. Its easy and free!

The code you’ll need

Now remember whenever working with PHP code it must always appear between some opening and closing PHP tags.

So make sure you have a .php file and paste the following code in. Check to make sure it appears between the PHP tags. I will explain what it all does shortly.

<?php
//Function: Get flickr media and display based on user id
function getFlickrPhotos($id, $limit=9) {
    require_once("phpFlickr/phpFlickr.php");
    $f = new phpFlickr("Your-Api-Key");
    $photos = $f->people_getPublicPhotos($id, NULL, NULL, 12);
    $return.='<ul class="flickrPhotos">';
    foreach ($photos['photos']['photo'] as $photo) {
        $return.='<li><a href="' . $f->buildPhotoURL($photo, 'medium') . '" title="' . $photo['title'] . '"><img src="' . $f->buildPhotoURL($photo, 'square') . '" alt="' . $photo['title'] . '" title="' . $photo['title'] . '" /></a></li>';
    }
    echo $return.='</ul>';
} ?>

What this code does, is use the PHPFlickr API (which you should have downloaded and referenced correctly in the function) to run through any photos it finds, limited to the number you can specify in the function attribute. It will then output a <ul> following by a list <li> of images and a closing <ul>.

So now you have the function to build the Flickr Api Query, you will just need to call the function and pass in any attributes you require.

Now place the following code where you want the Flickr photos to appear.

<?php getFlickrPhotos('flickrUserID',6); ?>

What this does, is that it calls the function we created earlier, passes through your Flickr user id (which looks something like this: 29071870@N02) and specifies how many photos you want to show. In this case – 6. But by default it will choose 9.

Test it out and you will notice it just spits outs a whole heap of images cascading down the page with links to a larger photo. These will need to be styled with CSS if you want them to appear in a grid or line or whatever. But I shall leave the styles up to you at this point.

Extending the function

This function can be extended and customized in a multitude of different ways. You can specify just certain sets, or loop through multiple groups or users. By editing the output of the code you can show thumbnails or larger images or even just text with direct links to the corresponding photos Flickr page. More more information on this API and its extendability check out the PHPFlickr documentation.

Using WordPress?

If you are using WordPress and want to display you photos on your blog – simply place the main Function into your functions.php theme file and call the function with the attributes where you require it. Such as your sidebar.php or footer.php

If you want to display some photos directly in a particular post, then you will need to install a plugin so the PHP function can be read by the CMS. This is probably the best I have found to date. Exec PHP

Category: Articles

Tags: ,, ,