Brent Soderberg

I recently set up the photo gallery page of BikeRide.com using the Flickr API. I wanted to pull in all my sets that include cycling photos. I couldn’t see an API method for making a call to get all my sets with photos containing the tag “cycling.� That would have been the best way to make a maintenance free page, but I have to start with making an array containing the setIds of my cycling related photos.

The code loops through the ids, make an API call to get the set information including the title, description, number of photos in the set, and the id of the primary photo to display for the set.

The next step is to make an API call to get individual photo information to get the URL for the image on Flickr. The code example is below.

output='';
galleryHTML='';

// Lock application and set variable for caching purposes
Application.Lock();	//Lock the application object

if (new Date().getTime() > (Application("galleryTime") + 36000)) { // caching - execute if more than 10 minutes old;

	// My Flickr Set IDs - Just add a new id the next time a set is added to flickr
	setIds = new Array(
		'72157594215842408', //2006 FSA GRAND PRIX
		'72157594214549645', //2006 RAMROD
		'72157594201502432', //2006 NYC Triathlon
		'72157594168641657', //2006 Pat Griskus Triathlon
		'72157594146912138', //2006 EBCC Bash Bish 200K
		'72057594121299286', //2006 Shelbourne Falls 200K
		'72057594079933400', //2006 Plainville Crit
		'1352705', //2005 Chainbiter Cross
		'1145739', //2005 Litchfield Fall Ride with Gordon
		'712816', //2005 Tour of the Litchfield Hills
		'415217', //2005 Quabin 200K
		'408170', //2005 Tour of CT
		'408191', //2005 Bershire 300K
		'408452', //2005 Berkshire 100K
		'762107', //2004 Chainbiter Cyclocross
		'411413', //2004 Southington Cyclocross
		'411569', //2004 Stockbridge Century
		'408851', //2004 Philly USPRO
		'767925', //2004 Tour of CT
		'762481' //2003 World Championships
	)

	for (i=0;i<setIds.length;i++) {
		url = 'http://www.flickr.com/services/rest/?method=flickr.photosets.getInfo&photoset_id='+setIds[i]+'&api_key=[myFlickrKey]'

		// Create an ASP XML parser object
		var xml = Server.CreateObject("MSXML2.ServerXMLHTTP.4.0")
		xml.open("GET", url, false);
		try {
			xml.send();
			if (xml.status == 200) {

				xmlDoc = xml.responseXML
				xmlDoc.setProperty("SelectionLanguage", "XPath");
				photoset = xmlDoc.selectNodes("//photoset")
				if (photoset && photoset.length > 0) {
					setId =  photoset[0].getAttribute("id");
					photoId = photoset[0].getAttribute("primary");
					server = photoset[0].getAttribute("server");
					count = photoset[0].getAttribute("photos");
					title = photoset[0].getElementsByTagName("title")[0].firstChild.nodeValue;
					desc = photoset[0].getElementsByTagName("description")[0].firstChild.nodeValue;
					imgurl = photoId;

					//Now make anothe API call to get the right photo size to dislplay
					var xmlSizes = Server.CreateObject("MSXML2.ServerXMLHTTP.4.0")
					sizesURL = 'http://www.flickr.com/services/rest/?method=flickr.photos.getSizes&photo_id='+photoId+'&api_key=[myFlickrKey]';
					xmlSizes.open("GET", sizesURL, false);
					try {
						xmlSizes.send();
						if (xmlSizes.status == 200) {
							xmlSizesDoc = xmlSizes.responseXML;
							xmlSizesDoc.setProperty("SelectionLanguage", "XPath");
							sources = xmlSizesDoc.selectNodes("//size[@label='Square']");
							if (sources && sources.length > 0) {
								imgurl = sources[0].getAttribute("source");
							}
						}
					} catch(e) {

					}
					xmlSizes = null;
					// Build the html to output - ok - I know I need to take my css
					output += '<div class="photobox"'>'
					output += ''<div class="galleryphoto"><a href="http://www.flickr.com/photos/bikeride/sets/' + setId + '/">'<img src="'+imgurl+'" width="75" height="75" border="0" alt="'+title+'" />'</a></div>'
					output += ''<div style="height: 85px;">'
					output += ''<strong>'+title+'</strong> ('+count+' photos)<br />\n'
					output += desc + ' ';
					output += ''<a href="http://www.flickr.com/photos/bikeride/sets/'+setId+'/">View Photos ...</a>\n'
					output += ''</div>'</div>\n'

				}

			}
		} catch(e) {

		}
		xml = null;
	}

	if(output != '') {
		Application("galleryHTML") = output;
	}

	Application("galleryTime") = new Date().getTime();

}		

galleryHTML = Application("galleryHTML");

Application.UnLock();	//Unlock the application object

Response.Write(galleryHTML);

I will still need to add an Id to the code the next time I add a set of cycling photos, but that is it. I would like to play more with the API and make an Ajax style photo gallery on top of the Flickr API.