PHP Flicker personal photo album Version 1.6

Version 1.6 Fixes a problem with the Flickr API code, and ads a small change in file structure to allow easier updates in the future. Enjoy!

Source code

Here are the files for the project, its recommended to use the latest version.
PHP Flickr! photo album Version 1.6
PHP Flickr! photo album Version 1.6 Preview
Changes:

• Updated code to work with the Flickr API
• Made a file structure change for easier updates in the future

Old source files:
PHP Flickr! photo album Version 1.5
PHP Flickr! photo album source Version 1.01
For an explanation of the basic idea of the code, continue reading.

Introduction

This tutorial will show you how to put your Flickr! Photo’s on your personal webpage. After an extensive search and scanning allot of complicated API scripts this idea was the least complicated one I could come up with. The only API call is the one in the URL requesting the XML feed, and that’s technically not an API call. This project contains nothing fancy. The script allows you to customize a number of settings, including the number of rows displayed. It automatically generates pages for all your photos for a nice album. If you just can’t wait for the code, scroll down to the bottom of the page and grab it! For those that could use some explaining, read further, or download the documentation (also at the bottom of the page).

The end result (sized down a bit).

The Flickr! API

Flickr! is a great service for hosting your personal photos. You can share it with your friends, your family and the world. The Flickr! API is a very useful tool to use your uploaded photos for all kinds of uses, the only drawback is the complicated nature. For this project we use the simplest possible way to access your photos from your Flickr! account. You can use this for anything you need a Flickr! photo.The code is written in PHP5 but the basic idea applies to any language. We show how to get a authentication key, how to create the URL to your photos and how to selectively request the correct amount of photos for least server load.

Requirements

The basic structure of the code for this project will be explained. To follow this project you need a testing server with PHP5 installed and some knowledge of PHP. If you do not have hosting you can setup your own. Xampp is a free tool and it takes the hassle out of setting up a personal web server on your computer, it is available at Apache friends

Please note you need a Flickr! account, and it should have some uploaded photos already, without those this project will be a fruitless exercise. If you don’t have these you can sign up at www.flickr.com for free.

Personal note

This was done for fun and should be viewed in the same way.

The Problem

The Flickr! API can be overwhelming. Its hard to implement and understand if you are not up to speed with the latest developments. Most users just want to access their photos and display them somewhere else, for instance on a personal website. It is discouraging for any novice or hobbyist to work through the documentation for a simple implementation like this. A result of this is a lost of interest and the idea gets scrapped. This project has the solution.

Data Feeds

For this project we make use of a XML data feed. Every user of Flickr! has access to his/her own data feed. To get access to the data feed you will need to build the URL that leads to the XML file.For this URL you need the following information:

• Your Flickr! ID
• The personal API key
• Basic URL structure

Your Flickr! ID

The Flickr! ID is the code at in the URL bar when you view your photos, mine looks like this:

http://www.flickr.com/photos/46772344@N00/.

In this URL 46772344@N00 is your Flickr! ID. But what if you changed your Flickr! ID to something like

http://www.flickr.com/photos/jurgenstrydom/

for readability? Will this work? Unfortunately it wont, but if you were not smart enough to write down your ID there is a solution. Visit idgettr and enter the required URL to your photos. Hit find and you should receive your old Flickr ID! Write this down in notepad or on a piece of paper, you will need it soon enough.

API Key

To get access to the API you need an API key. This ensures only people that requested their photos being accessible from the outside can use them. To get the API key go to http://flickr.com/services/api/key.gne and follow the instructions. After the process is complete you should be supplied with a code that looks something along the line of this: 6cacc91553b802874c6bbad658c9ce94. This is your API key, write it down, or copy it to notepad.

XML URL

Now you have enough information to build the URL to your XML file. The XML file contains the information you need to create the paths to your photos on the Flickr! servers. To create the URL you use this skeleton:

http://flickr.com/services/rest/?method=flickr.people.getPublicPhotos &user_id=$my_id&api_key=$api_key

Replace $api key in the URL with your own API key and $my id with your ID. If you enter this into your browser you should get text output. If it looks something like the example XML file in the appendix then this is your XML file. You can now use this information to build the URL to your photos. For a final bit of optimization add the following to the URL: &per_page=10&page=2, this allows you to only request specific information from the Flickr! servers keeping bandwidth and load to a minimum. The per page option tells the server how many photos you want on a page, and the page option tells the server on which page you would like to view.

Photo Paths

The XML contains all the data you need to build the path to your photos. In the XML file you will see each line contains:

• photo id, eg. 187219629
• owner, eg. 46772344@N00
• secret, eg. 2e56b237da
• server, eg. 74
• title, eg. calm
• ispublic, eg. 1
• isfriend, eg. 0
• isfamily, eg. 0

This is the information related to each of you photos. Note that the owner item is the same as your user ID. To create the URL for each photo you use the information from the XML file. The URL leading to each of your photos can be built with this guideline URL.

http://static.flickr.com/[server-id]/[id]_[secret]_[mstb].jpg

Using the example information in the item list for the photo we should replace [server-id] with 74, [id] with 187219629, remember the in between. [secret] should be replaced with 2e56b237da. The final part of the URL contains for example a b. This specifies the size of the picture

• s small square 75×75
• t thumbnail, 100 on longest side
• m small, 240 on longest side
• - medium, 500 on longest side
• b large, 1024 on longest side (only exists for very large original images)
• o original image, either a jpg, gif or png, depending on source format

A final URL would look like this: http://static.flickr.com/74/187219629_2e56b237da_b.jpg

Parsing XML Data

To extract the data from the XML file we use the simple XML function from PHP5. This function should be used as follows:

$xml = simplexml_load_file($file);

where $file equals the path to the XML file, for this project this is your XML URL. The resulting array is stored in the $xml variable. To access the different parts of the file in your array, you can use PHP commands like this:

• $xml->photos[’total’]; (Total number of photos)
• $xml->photos->photo[2][’id’]; (Gives the photo ID of photo number 3)

Summary

We saw how to obtain all the required information from the Flickr! service needed to access our photo data. This data from the XML file can then be used to get the paths to the photos. Once you have access to your photos you can use them in your applications.

If there are any comments, bug or queries please e-mail them to me (link at the bottom of the page).

Similar Projects

If this is not exactly what you were looking for, you might want to check out Tyler Hall @ Chattablogs on how to Include Recent flickr Photos with PHP. He does a very good job of hacking the javascript badge from flickr to display the photos on a website.

References

Flickr! homepage
Flickr! API Documentation
Flickr! photo url system
Flickr! API key generator
idgetr

Documentation

Flickr! photo album documentation