Question

I’m looking for an easy way to serve lower resolution images to mobile browsers. I’d like to generate these lower quality images on the fly and store them in media cache for use by similar browsers. Any ideas as to a good implementation of this? (Note: We have sc:image tags all over the site, and I want to avoid changing these.)

Answer 1

Right, interesting question! Let’s split this into two problems you need to handle: the lower quality image generation and the caching.

Lower Quality Images

For this I would look at adding a new processor into the getMediaStream pipeline. This processor could check the UserAgent of the incoming request and resample the image accordingly. For example if it determines the browser is a standard desktop browser it will do nothing, but if it is a mobile browser it will take the image stream and create a new one with a resampled image.

Take a look at this example which shows how you can add your own processor into the pipeline. Also you could reflect on the Sitecore.Resources.Media.ResizeProcessor for an idea on how to do this.

Caching

Looking through the code for the Sitecore media caching, it uses the current MediaOptions of the request to generate a unique key for the cache. MediaOptions has a CustomOptions property which is a string dictionary, anything you add into there will also get used in the hash to create the key.

I would look at extending the handler for image processing, override the ProcessRequest method and get the current MediaOptions for the request. At that point you could identify the browser (using similar code for the first part, you could share this logic), and if it is a mobile browser you could insert something into the Dictionary of the MediaOptions, e.g. “Mobile”:”1″. Then you would just call the base.ProcessRequest method and let the standard process continue on.

This page shows an example of extending the MediaRequestHandler.

Hope that helps, I haven’t looked into it in more detail and there are likely some potential problems I’ve overlooked, but hopefully that’s enough to allow you to make a start. It’s a bit of code but it seems like a good library to have with plenty of reuse possibilities, and you won’t need to alter the tags across your site.