Browse ImageVault with PicLens

PicLens is a very useful addon for your browser that lets you browse images and other media in a 3D view. I have created a simple example on how you can enable PicLens on your EPiServer site running ImageVault.

The following walkthrough shows you how to enable PicLens on any website using ImageVault.This tutorial shows the basics of creating a Media RSS and it will expose all images from ImageVault. In part 2 of this article you will be able to download a template with a little more functionality. If you don´t have PicLens installed in your browser please visit http://www.cooliris.com/ to install.

To create the media RSS you need to create a generic handler. The media RSS is a standard for syndicating multimedia files (audio, video, image) in RSS feeds. So lets create a new generic handler and add the methods and properties we need.

public class PicLensHandler : IHttpHandler {
    public void ProcessRequest(HttpContext context) { }
    private void WriteEntry(XmlTextWriter xtw, IVFileData item) { }
    public bool IsReusable {
        get { return true; }
    }
}

Now its time to enable processing of the HTTP web request by overriding the ProcessRequest method. This is where we create the basic media rss structure needed for PicLens to work.

public class PicLensHandler : IHttpHandler {
    public void ProcessRequest(HttpContext context) {
    int id = Convert.ToInt32(context.Request["album"]);
    context.Response.ContentType = "text/xml";
    XmlTextWriter xtw = new XmlTextWriter(context.Response.Output);
    xtw.Formatting = Formatting.Indented;
    xtw.WriteStartDocument();
    xtw.WriteStartElement("rss");
    xtw.WriteAttributeString("version", "2");
    xtw.WriteAttributeString("xmlns", "media", null, "http://search.yahoo.com/mrss");
    xtw.WriteStartElement("channel");
    foreach (IVFileData fileData in IVDataFactory.GetFiles(IVDataFactory.RootAlbumId,true)) {
        WriteEntry(xtw,fileData);
    }
    xtw.WriteEndElement();
    xtw.WriteEndElement();
    xtw.WriteEndDocument();
}
private void WriteEntry(XmlTextWriter xtw, IVFileData item) { }
public bool IsReusable {
    get { return true; }
}

To complete the media rss we need to provide some code to our WriteEntry method. This method creates an item entry with three different ImageVault handler links to different image sizes (weburl, thumbnailurl and largeurl).

public class PicLensHandler : IHttpHandler {
    public void ProcessRequest(HttpContext context) {
        int id = Convert.ToInt32(context.Request["album"]);
        context.Response.ContentType = "text/xml";
        XmlTextWriter xtw = new XmlTextWriter(context.Response.Output);
        xtw.Formatting = Formatting.Indented;
        xtw.WriteStartDocument();
        xtw.WriteStartElement("rss");
        xtw.WriteAttributeString("version", "2");
        xtw.WriteAttributeString("xmlns", "media", null, "http://search.yahoo.com/mrss");
        xtw.WriteStartElement("channel");
        foreach (IVFileData fileData in IVDataFactory.GetFiles(IVDataFactory.RootAlbumId,true)) {
            WriteEntry(xtw,fileData);
        }
        xtw.WriteEndElement();
        xtw.WriteEndElement();
    xtw.WriteEndDocument();
}
private void WriteEntry(XmlTextWriter xtw, IVFileData item) {
    xtw.WriteStartElement("item");
    xtw.WriteElementString("title", item.Title);
    xtw.WriteElementString("link", new IVUrlBuilder { Id = item.Id, Width = 500, Height = 500 }.ToString();
    xtw.WriteStartElement("media:thumbnail");
    xtw.WriteAttributeString("url", new IVUrlBuilder { Id = item.Id, Width = 300, Height = 300 }.ToString();
    xtw.WriteEndElement();
    xtw.WriteStartElement("media:content");
    xtw.WriteAttributeString("url", new IVUrlBuilder { Id = item.Id, Width = 1024, Height = 1024 }.ToString();
    xtw.WriteEndElement();
    xtw.WriteEndElement();
}
public bool IsReusable {
    get { return true; }
}

Now your done and we can add the handler to your head section in your x/html document like this:

<link rel="alternate" type="application/rss+xml" title="Kloojed - ImageVault image stream" href="/PicLensHandler.ashx" />

Visit your page and enjoy your ImageVault images in PicLens. Hope you enjoyed this article and feel free to drop a comment below.