Creating a Simple Photo Gallery with FlickrNet
Updated 9/18/08
If you have been looking for a way to include your Flickr photos on your website using ASP.NET, then you definitely need to take a look at the FlickerNet API. There are several good examples on the site to help you get started, but I didn't see any that showed how to return photos from a specific set. After a little trial and error I was able to figure out how to accomplish this, and it turns out that it is quite easy.
The first issue I had was due to the fact that I am hosting my site on a managed server with 1and1.com. Turns out you have to declare the proxy directly within the FlickrNet configuration parameter. You also have to make sure that you are using your actual UserID and not your screen name. I learned this the hard way, but I discovered that the easiest way to determine your UserID is to look at the RSS feed links on any of your Flickr pages. One other issue I ran up against involved permission errors for the default cache setting for FlickrNet. I decided that I was not going to need this and simply disabled the cache setting in the web.config. Let's take a look at the necessary web.config settings. You may need to change these depending on your particular needs. Remember that the proxy setting is for sites hosted with 1and1.
Web.config
<configSections>
<section name="flickrNet" type="FlickrNet.FlickrConfigurationManager,FlickrNet" allowLocation="true" />
</configSections>
<flickrNet apiKey="putyourflickrAPIkeyhere" secret="flickrsharedsecret" cacheDisabled="true" >
<proxy ipaddress="ntproxy.1and1.com" port="3128" />
</flickrNet>
<appSettings>
<add key="UserId" value="flickrUserID"/>
</appSettings>
The method that I used to return the photo collection from a particular set in Flickr is pretty straightforward.
Gallery.aspx.cs
using System;
public partial class Gallery : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
PhotoRepeater.DataSource = RecentPhotos();
PhotoRepeater.DataBind();
}
public static FlickrNet.PhotoCollection RecentPhotos()
{
FlickrNet.Flickr flickr = new FlickrNet.Flickr();
FlickrNet.Photoset set = flickr.PhotosetsGetPhotos("72157600111054287");
return set.PhotoCollection;
}
}
Now that we have the web.config and the code behind set up and ready to go, it is time to decide how to present the information. The example on the FlickrNet site has a good example of how to use the Repeater control to return thumbnails with links back to the main Flickr page. I wanted to spice things up a bit, so a found a nice Javascript gallery that would work with the repeater control called SmoothGallery.
In order to use SmoothGallery, follow the setup instructions provided on the site. Then set up your repeater control's item template with the basic image information as follows.
Gallery.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Gallery.aspx.cs" Inherits="Gallery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Sandbox</title>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div id="body">
Gallery made possible with <a href="http://www.flickr.com">Flickr</a>, <a href="http://smoothgallery.jondesign.net">SmoothGallery</a> and <a href="http://www.codeplex.com/FlickrNet/">
FlickrNet</a> API<br /><br />
<div id="myGallery">
<asp:Repeater runat="server" ID="PhotoRepeater">
<ItemTemplate>
<div class="imageElement">
<h3><%# Eval("Title") %></h3>
<p>Copyright 2007 Kevin Brammer</p>
<a href="<%# Eval("WebUrl") %>" title="open image" class="open"></a>
<img src="<%# Eval("MediumUrl") %>" class="full" />
<img src="<%# Eval("SquareThumbnailUrl") %>" class="thumbnail" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready', startGallery);
</script>
</div>
</form>
</body>
</html>
And that should just about do it. Also, be certain that you don't have any fancy CSS affecting your links, because that might mess with the gallery navigation. Good luck!