Media Adapter

Introduction
Sample
Parameters
Details
Examples

Introduction

The media adapter is used to resize and reformat images dynamically for a mobile site. It uses the useragent of the current http request to determine the handset and resizes the image accordingly.

Sample

Media Adapter usage urls must be in the following format:

http://www.mobileelements.com/MediaAdapter?key=00000000000000000000000000000000&src=http://mobileelements.com/Content/img/logo_large.jpg

This example takes the original image (located at http://mobileelements.com/Content/img/logo_large.jpg)

and resizes and reformats it to the output image for use on mobile devices:



You can include an adapted image in an HTML document by embedding a URL within an <img> tag. For example, the following <img> tag results in the same image as above:

<img src="http://www.mobileelements.com/MediaAdapter?key=00000000000000000000000000000000&src=http://mobileelements.com/Content/img/logo_large.jpg"/>

Parameters

Parameters are separated with the ampersand (&) character. You can specify the parameters in any order.

Details

The media adapter will use the current http request useragent to match the device viewing the image. If the "ua" parameter is supplied, it will override the useragent and the input parameter value will be used to match the device instead.
The media adapter is designed to resize the source image to 100% of the screen width for the given device. This can be modified by using the "factor" parameter above.
The aspect ratio of the image is never modified. If the aspect ratio of the image and the device differ, the image is reduced further to fit in the display.
The media adapter tries to serve first in PNG despite the original format of the image. If this is not supported by the device, it tries JPG, GIF and finally BMP -- in that order. No other output formats are currently supported. If the device does not support any of these formats, a GIF image will be returned.

Examples

The following example will only resize the image to 50% of the device screen width. This is useful for putting 2 images side by side.

The following example specifies the useragent override by using the ua parameter. This is useful for device specific sites (eg. iPhone webapps).