Media RSS (MRSS) and PicLens support in a web page

Media RSS (MRSS) is an XML format which extends the RSS format. By using this format, a website can be enabled to provide rich media functionality. This can be used for images, audio and video. This entry discusses enabling Media RSS for images. Video is very easy to implement, but will not be discussed here. By using PicLens in Firefox, the result looks like below. It is very fast, full screen, and has nice facilities to scroll around the images, zoom in and out and other such things. Here I will discuss a simple implementation, and you can scroll below to download a small .NET application to automate this process. If you already have a Media RSS viewing application, then check out an example of the output (Note, copyright links were added after the page was generated).

How to implement Media RSS

The Media RSS format is very simple, it only requires the addition of two namespaces to an RSS feed, and two elements within that namespace. The namespaces are:

xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:media=http://search.yahoo.com/mrss/

The elements that need to be added are:

<media:thumbnail url="path_to_image_thumbnail" />
<media:content url="path_to_image" />

The URL's can should be absolute URL's to validate in feed validation systems, although it will still work if you use relative URL's. The thumbnail element should be used, but if you don't have a separate thumbnail image you can just point it at the same as the full size image. It would be worthwhile to use a thumbnail as you will save bandwidth and probably please your viewers with a more responsive experience.

The last thing to do is to include a link to the feed on the page where you want to display it. This points to the Media RSS feed you created earlier. The Media R

SS feed can exist anywhere in your site, just make sure you point to it in the page where you want the feed discovered.

<link rel="alternate" href="imagegallery\media.xml" type="application/rss+xml" />

Automatic generation of Media RSS

I have included a download of an application to generate all the files necessary to implement Media RSS on a site. This is an update to an earlier application called Focas.net.ImageGallery. This application creates a MooTools/Prototype image gallery. This update adds a Media RSS file and appropriate link to it. The download link is below. The information describing the images is extracted from the image itself. There is an earlier blog entry describing how this is done, or you can also refer to the metadata section below.

Using the application

To use the application, you need to start the application and do the following:

• Choose the image directory
  Note: Only images of type jpg,jpeg,gif and png will be used, and only images in the root of this folder.
• Output directory
  Any existing files in this folder will be overwritten. The folder will not be cleared out first if any files exist.
• Title
  This will be the title of the page, the heading above the images of the Image Gallery, and title of the Media RSS feed.
• URL
  This is optional. If you want to put the files up on a web server then this would be the path up to where you put the gallery. If you omit it, then the paths to images will be relative. This may result in feed validators claiming the feed is invalid, but it will work anyway. It is worth leaving this blank For the first attempt, so that you can see what the gallery looks like from the local file system.
• Folder for images
  This is the name of the folder where the actual pictures will be stored. The default if empty will be pictures.

Once you click Make the gallery! all the necessary files will be created, and automatically displayed in internet Explorer. Note that the images will not work properly in PicLens if an URL was specified as the paths are absolute URL's. The files are now ready to upload to your web server.

A note about metadata and troubleshooting

Metadata is data describing something. In this case, describing the images. This metadata is extracted from the images themselves. If using Windows Vosta then this information is easily entered via Windows Explorer or the standard picture viewer application. On previous versions of Windows, you can download the Microsoft Pro Photo tools, a free download from the Microsoft site. If you have no metadata for your images, then the application will still generate a Media RSS file, but it is better to use some metadata.

Additional resources

PicLens WebMasters guide
Microsoft Pro Photo Tools
PowerSet Media RSS links

Downloads

Source code (.NET) (89.9 KB)

Executable(140.5 KB)

Tuesday, August 12, 2008 11:18:03 PM (AUS Eastern Standard Time, UTC+10:00)       Comments [0]  Downloads | JavaScript | Metadata | Programming | Webmaster

How to add a provider to the Internet Explorer search bar

Internet Explorer 7 and above has a search bar with a default provider of live search. It also contains a link to other search providers such as Microsoft and Wikipedia. It is very easy to add a new provider to this search bar. It can be done manually, but this article describes how to change a web page to enable auto-detection of a search provider, plus how to create a link to that provider. Firefox 2  and above also has a search sidebar that supports this feature.

The search provider requires an XML file which adheres to the OpenSearch Description schema. It is easy enough to create this, but if you want to use Internet Explorer to create it for you then you can use the Find more providers option in the search bar dropdown. On the page it displays you place the search page for your site with the word TEST instead of a valid search keyword. This will only work for sites that use GET rather than POST for search queries. Once you have entered the URL, there is a View XML option which will display the necessary XML. It will look like this:

<? xml version = "1.0" encoding = "UTF-8" ?>
<OpenSearchDescription xmlns = "http://a9.com/-/spec/opensearch/1.1/" >
<ShortName>blog.focas.net.au</ShortName>
<Description>blog.focas.net.au provider</Description>
<InputEncoding>UTF-8</InputEncoding>
<Url type="text/html"
      template="http://blog.focas.net.au/SearchView.aspx?q={searchTerms}"/>
</OpenSearchDescription>

The ShortName will show up in the search bar. This file should be saved somewhere on your website. it doesn't matter where as it is the metadata in the pages that will point to its location.

On any page where you want Internet Explorer to automatically detect the search provider, you need to add some metadata into the head section of the page. This will look like this:

<link title="blog.focas.net.au search"
       rel="search"
       type="application/opensearchdescription+xml"
       href=http://blog.focas.net.au/blog.focas.net.au.searchprovider.xml/>

This tells Internet Explorer that there is a search provider from the rel attribute containing the value search. The type is a mime type referring to the Open Search Description xml format. the href is the location of the XML file you saved earlier.

Once this is in the page, when you browse to this page, Internet explorer will change the drop-down icon colour on the search toolbar to orange. Like this: 

Figure 1: Search provider glowing when it has discovered a search provider

By clicking on the drop-down, the provider will be displayed. It has not been installed at this stage, but is available whenever the page is viewed:

Figure 2: Search provider displayed in the search provider drop-down

To allow the user of a page to install the search provider in Firefox2+ or Internet Explorer 7+, you need to create a link on a page that calls some javascript. The window.external method must be called in order for the link to work. The following script is a modified version of a script on the Mozilla developer center 

function installSearchEngine(url) {
  if (window.external && ("AddSearchProvider" in window.external)) {
    // Firefox 2 and IE 7, OpenSearch
    window.external.AddSearchProvider(url);
  } else {
    // No search engine support (IE 6, Opera, etc).
    alert("Sorry, your browser doesn't provide search engine support");
  }
}

This page has a search provider in its metadata, so you can see the effect in the search box if using IE7+. Alternatively you can try installing the search engine by clicking here.

Tuesday, May 27, 2008 10:26:21 PM (AUS Eastern Standard Time, UTC+10:00)       Comments [0]  Metadata | Webmaster

Image Gallery using metadata

Image gallery using metadata

This is a small application that takes all the images in a directory and creates a lightbox style AJAX image gallery that is web ready.  It reads the metadata in the picture to extract the title, description, keywords and rating. Primarily I wrote this to experiment with some C# 3 features, such as LINQ.

There are no options in the program, its fairly simple, point it at an input directory, an output directory and click  Make the gallery! And it does its stuff. Its not overly sophisticated, it doesn’t generate thumbnails, just uses width and height attributes on the img tags. All the necessary support files will be copied across to the output directory. A page called index.html is generated and automatically displayed when complete.

Metadata collection

Metadata is collected using the System.Windows.Media.Imaging namespace. This is part of the Windows Presentation Foundation. When I tested this it worked well on Windows Vista, but when I tested it on a machine running Windows XP SP2, I got a codec not available error when accessing the metadata. I got around this by installing Microsoft Photo Info which is a fantastic utility for XP that incorporates read/write access to image metadata,  It has explorer integration, and I highly recommend it if you like adding metadata to your images. It can also be very helpful for those who have upgraded from Windows Vista to Windows XP.

The code to access the metadata is straightforward:

using(Stream stream = fii.OpenRead()) {

                    BitmapDecoder decoder = BitmapDecoder.Create(stream, BitmapCreateOptions.None, BitmapCacheOption.Default);

                    BitmapFrame frame = decoder.Frames[0];

                    BitmapMetadata metadata = (BitmapMetadata)frame.Metadata;

                    caption = metadata.Title;

                    if(metadata.Subject != null) {

                        caption += " - " + metadata.Subject;

                    }

I tried to close the stream, hoping that the metadata would be cached, but I suspect it uses Lazy loading because it would throw an error as soon as I accessed the metadata.

LINQ seemed a good idea for filtering the files. There may be a better way but this worked just fine.

            string[] files = Directory.GetFiles(directoryToProcess);

            var query = from f in files

                        where (new string[] { ".jpg", ".png", ".gif" , ".jpeg"}).Contains(Path.GetExtension(f).ToLower())

                        select f;

              

                return query;

Having the list of file extensions as the first part of the where clause didn't please me, but that is just aesthetics.

Javascript/CSS

The lightbox effect is achieved by using the MooTools JavaScript framework, and another library and example from phatfusion which creates the lightbox. This program just encapsulates the HTML generation,  metadata extraction and file copying.

Scope for improvement

There is a lot of scope for improvement. The class layout is fairly simple. Interfaces could be added, and a plug-in approach to allow for different LightBox or similar effects. As this was more of an experiment than a robust utility I didn’t get too precious about such design considerations. I hope it helps a few people to make a gallery for themselves.

Focas.NET.ImageGallery.zip (84.1 KB)
Saturday, May 17, 2008 10:11:52 PM (AUS Eastern Standard Time, UTC+10:00)       Comments [0]  Downloads | Metadata | Webmaster