Yesterday I had to create a way to custom link pictures from Flickr to a website. Here is a simple way to do it using an RSS feed.
First start by getting the RSS feed that you want to use. Pull up Flickr and open up the Photostream or set that you would like to use. Near the bottom of the page you will find the link to the RSS.
I grabbed a random rss for this example:
http://api.flickr.com/services/feeds/photos_public.gne?id=13588395@N00&lang=en-us&format=rss_200
Trim the url to take off the querystring data after the id.
http://api.flickr.com/services/feeds/photos_public.gne?id=13588395@N00
Now onto the code
In the code behind, add this code:
public DataTable getFlickrRSSFeed(string url){
XmlTextReader reader = new XmlTextReader(url + "&format=cdf");
DataSet ds = new DataSet();
ds.ReadXml(reader);
return ds.Tables[4];
}
This will take the passed rss url and request it from flickr in the cdf (common data format) format. (yes I understand that reads redundant)
You can use the other formats if you wish, but cdf was the most friendly format to be returned as a DataSet.
I used table 4, since in cdf format it held the most relevant information for what I was trying to achive (the image, title, date and description).
Lets move on to the next part of code:
protected void Page_Load(object sender, EventArgs e)
{
myFlickr.DataSource = getFlickrRSSFeed("http://api.flickr.com/services/feeds/photos_public.gne?id=13588395@N00");
myFlickr.DataBind();
}
myFlickr will be the id of the dataview or repeater (whichever you decide to use)
That is all the code that is necessary in the code behind, the rest we will do in the aspx page.
In my aspx page, I decided to use a repeater to achieve the format I wanted.
<asp:Repeater ID="myFlickr" runat="server">
<ItemTemplate>
<div class="flickrPhoto">
<div class="image">
<%# Eval("ABSTRACT").ToString().Substring(Eval("ABSTRACT").ToString().IndexOf("<a href=\"http://www.flickr.com/photos/"), (Eval("ABSTRACT").ToString().LastIndexOf("/></a>") + 6) - Eval("ABSTRACT").ToString().LastIndexOf("<a href=\"http://www.flickr.com/photos/"))%>
</div>
<div class="info">
<p class="title">
<%# Eval("TITLE") %>
<%# Convert.ToDateTime(Eval("LASTMOD")).ToString("MM/dd/yyyy") %>
</p>
<p class="desc">
<%# Eval("ABSTRACT").ToString().Substring(Eval("ABSTRACT").ToString().LastIndexOf("<p>")+3,Eval("ABSTRACT").ToString().LastIndexOf("</p>") - (Eval("ABSTRACT").ToString().LastIndexOf("<p>")+3))%>
</p>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
As you may notice, getting the image, title and description alone, takes a little string manipulation. After going through all of flickr's rss formats, I noticed that none of them separated these elements out into their own rss elements, so I had to identify parts of the string that always matched up before the elements I wanted.
For the description, if it is not present it will display the image and it's link. For handling this I just threw in some css that hid any images in the desc field. You could go more complex and filter this out, but for now this was a job I was trying to keep as light as possible.
Hope this helps make a similar task easier for someone out there.
Share on Facebook
Tweet Me
