User Agent Feature Detection

Extension for Symphony CMS

What is this?

The User Agent Feature Detection extension makes information about user agent features available in the param pool for the purposes of responsive web design.

How does it work?

In a word, cookies. As the page is being created, Symphony checks for the existence of a specially-named cookie and adds that information to the param pool. If the cookie does not exist, you can set your page template up to include the feature detection scripts in the <head> of your document. If the cookie does exist, you can use that information to customize your page based on the value.

That was kind of vague. Can you be more specific?

Sure. The best use case right now is for mobile-first responsive images, in conjunction with JIT Image Manipulation. When enabled, UAFD will give you four new params related to screen resolution: feature_screen_max, feature_screen_min, feature_screen_breakpoint, and feature_screen_orientation. The first two will contain the larger and smaller dimensions of the screen as integers. feature_screen_breakpoint will be explained in greater detail below. feature_screen_orientation contains either “landscape” or “portrait” if available, or “unknown” if not.

For the uninitiated, the JIT Image Manipulation extension can crop and/or resize an original image and then cache and return the resulting, modified image – perfect for serving up smaller images by default, and larger versions when a higher-resolution screen has been detected. All that’s needed is a special URL in the src attribute of an img element. For example, the following will return a 600-pixel wide version of image.jpg:

<img src="http://example.com/image/4/600/0/1/path/to/image.jpg" />

Using the value of $feature-screen-max to size the image would create a different version for every unique resolution, so to increase the likelihood of having a cached version ready there is an array of author-defined breakpoints. The next breakpoint larger than $feature-screen-max will be returned in $feature-screen-breakpoint. The default (mobile) size can be configured in Symphony’s Preferences for use when JavaScript is disabled or detection otherwise fails. So the final responsive image URL looks like this:

<img src="http://example.com/image/4/{$feature-screen-breakpoint}/0/1/path/to/image.jpg" />

What is Symphony CMS?

Symphony is an elegant yet powerful open source content management system built on open standards like XML and XSLT. Stop what you’re doing and learn more about it.

Credits