Tag Archives: flickr

I needed to grab photos off of Flickr (flickr.com, a photo sharing site) in order to place them on a website. In this setup, Flickr takes care of the upload, photo storage, photo serving, etc and your website can access the images on it to use in your content. Flickr offers a way to embed images on your site in a Flash slideshow, but their interface has “features” that make it too busy and distracting to use as a simple design element. Also, it doesn’t handle resizing well, often cutting off your images or the interface’s buttons.

So, all I wanted was to grab a user’s public photos from Flickr (by username) and then allow someone to easily display one (or many). Lets look at how you use the classes:

Before you start, you need to put two PHP files on your server. One is mine (photosFlickr.php) and my code expects to find phpFlickr Class 3.0 (written by Dan Coulter that you can get at http://phpflickr.com/). Download his files, and upload the one called phpFlickr.php to your website (it is easiest to put it in the same folder as you put my code).

First, we include the code I wrote. Make sure to include the full and correct relative path to the file on your server.require_once("photosFlickr.php");

Second, we instantiate an instance of the class that handles multiple photos. We give the constructor the flickr username (as a string), and also your API key (as a string) which you can get for free from Flickr by clicking here.$flickrphotos = new photosFlickr($flickr_username, "YOUR-API-KEY-HERE");

Then lets actually use the instance we just created… the simplest way to do so is to ask for all the public photos (Flickr may only return the first 100 due to how their API works. You can easily modify my code to ask for more.). We do this by calling:$photos = $flickrphotos->getPhotos();
And we have the list of photos in the array called $photos. But if you look at this array, it is a mess! It is all information that makes sense to Flickr, but not as much to you. Don’t worry, I have a class to handle that as well.

For our example, lets pick one photo to deal with. We’ll do this randomly by calling:$photoOfInterest = $photos[array_rand($photos, 1)];
We now have picked the photo we want to work with. You can do this in many ways, the random method is just an example ($photos[0] would give you the first one image Flickr returned, etc.).

Now lets display this picture. We instantiate a photoFlickr instance (note this is different than the photosFlickr instance we used before:$flickrpic = new photoFlickr($photoOfInterest, "YOUR-API-KEY-HERE");
This will cause my code to make some sense out of the information returned by Flickr.

Optionally, you can decide the size you want to display the picture at. Just call:$flickrpic->setSize($width, $height);
This provides it the width and height. For example this may look like $flickrpic->setSize(300, 200); but you can also just give it the width (like $flickrpic->setSize(300); and my code will figure out the correct height based on the dimensions of the image.

It will also intelligently choose the image to load from Flickr’s site. Flickr stores multiple versions of each image (thumbnail, square, medium, large, original) and the code will look through these and pick the smallest one that has dimensions equal or greater than what you need. This means your viewer’s browser has to load as small a file as possible while still not stretching an image and thus making it look bad.

But you still haven’t shown anything to your user! You need to display the HTML code for the image. This is done easily by calling:print $flickrpic->getHTML();
This will output the image tag, with the sizes you specified (if any, otherwise default), and will automatically link the image to it’s page on Flickr. If you don’t want it to link to Flickr, just use $flickrpic->getHTML(false);.

That is all!

Please feel free to leave feedback. I’ll also consider new feature requests. Please alert me to bugs and I’ll fix and repost ASAP (I know there are some, I just don’t have time to fix all the edge cases right now).