Divide by zero
# Tuesday, August 12, 2008
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
link to del.icio.us link to reddit link to StumbleUpon link to Facebook Bookmark to Google
OpenID
Please login with either your OpenID above, or your details below.
Name
E-mail
Home page

Comment (Some html is allowed: a@href@title, b, em, i, strike, strong, u) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview