Create Flickr Photo Thumbnails for Your Site

My handy Python script allows you to create Flickr photo previews out of Flickr.com for your webpage or blog. The script makes use of Flickr API to retrieve photos from the server, but this script is NOT full implementations of all Flickr APIs. For simplicity and my personal use, the intention is to create simple previews (thumbnails) of Flickr's photos on my website, much like Flickr's badge for an external website. The major difference between my script and Flickr's badge is that my script allows you to display your favorites, technically saying, which is "clipped" from other's photo album. Besides, this script may be used as a starting point to build a complete implementations of Flickr API. I will also try it on my own for fun if I have time. If what you want is simply displaying your own photos at Flickr.com without spending extra minutes, go for Flickr's badge, an easy and nice tool provided by Flickr.com, instead. I also wrote a PHP version, which uses Flickr's feed service instead of API service. Check it out!

What you can and cannot do

You can create photo previews (thumbnails) from your favorites, your or other's public photos, your or other's specific photosets, and "Interestingness" at Flickr.com, and display it at your website or blog. However, at least my current implementaion, you cannot do more interactive features such as uploading, deleting, organizing photos and modifying tags -- many of which require authentication.

How to display Flickr photos at my website or blog

Step 1.
Download BMPyFlickr.zip (Python CGI and Ajax script files)

Step 2.
First, you need to know the path to Python on your hosting server. Open a telnet session and use the following command to obtain the path. If you get nothing, your server may not have Python installed.

$ which python
/home/bin/python

Step 3.
Open the BMPyFlickr.cgi file and replace the very first line with the path to Python obtained in Step 2.

#! /home/bin/python
# -*- coding: utf-8 -*-
# DO NOT REMOVE THE ENCODING DECLARATION ABOVE

Step 4.
Open the BMPyFlickr.cgi file and scroll down to find the user information section (line 111~128) as shown below. Then, change some values based on your Flickr account and modify the default values for options.
NOTE: Make sure to use an advanced text editor, such as UltraEdit and Notepad++. Avoid using Windows' Notepad or WYSIWYG(visual) editor to modify the source file, or you may mess up tab spaces of the source code, which is critical for the Python syntax.

########################################################################
# Modify the following information based on your need
########################################################################
#
# Flickr user information
api_key = "57d136180cfb713a68379b693bd8127e" # API key - REQUIRED
user_id = "57981825@N00"                     # user ID
homepage = "www.yourhome.com" 	           # used to prevent hotlink

# Default options for Flickr photos
per_page = "9"                               # default number of photos to be retrieved per page
page = "1"                                   # default number of page to be retrieved
photo_size = "t"                             # s  small square 75x75
                                             # t  thumbnail, 100 on longest side
                                             # m  small, 240 on longest side
image_css = "flickr_photo"                   # CSS class attribute for tag 
link_css = "img_link"                        # CSS class attribute for tag
photoset_id = ""
########################################################################

Step 5.
Upload the modified files to a desired directory on your server. Use a FTP client or the command below to set the permission of the CGI script to 755 (-rwxr-xr-x). This is very important for the script to work.

$ chmod 755 BMPyFlickr.cgi

Step 6.
Now, open another file, loading.js, included in the zipped file you downloaded. At the bottom of the javascript file, inside the loadData() function, you need to change the two parameters of getData() function calls as shown below. The first parameter is the url (including query strings) of the BMPyFlickr.cgi script file, and the second parameter is the IDs of DIV tags in your webpage where flickr photos will be displayed. Refer to query definitions below.

getData('http://yourhome.com/BMPyFlickr.cgi?type=fav&size=s','my_fav_photo');
getData('http://yourhome.com/BMPyFlickr.cgi?type=pub_all&size=s&per_page=8','my_photo');
getData('http://yourhome.com/BMPyFlickr.cgi?type=pub_set&size=s&set=72157600235440865','my_photoset');

Query Reference

type	type of Flickr service
	fav - Your Favorites pub_all - Given User's public photos pub_set - Your photoset specified by a photoset id number interesting - Flickr's "Interestingness" photos
size	size of photo to be displayed
	s - small square 75x75 t - thumbnail, 100 on longest side m - small, 240 on longest side
set	ID number of a photoset you want to display
per_page	number of photos to be retrieved per page
page	page number to be retrieved
user_id	user id (this can be used with "type=pub_all" only)

Step 7.
In your HTML webpage, put the following code between <head> and </head> tags.

Then, put the following codes inside <body> tag. A <div> region is the place where flickr photos will be displayed on page loading, so you may want to add CSS styles to it. When you change the ID of a DIV tag, make sure you change the corresponding parameter of getData() function call inside loading.js, as explained in Step 6.

<div id="my_fav_photo"></div>
<div id="my_photo"></div>
<div id="my_photoset"></div>
<script type="text/javascript">loadData();</script>

You're done.
See example. Also check the PHP version.
Leave a comment or question on the blog entry for this script.