Angular WURFL Image Tailor

An AngularJS directive for WURFL Image Tailor (WIT)

WURFL Image Tailor (WIT) is an automatic image tailor based on WURFL device detection. WURFL will detect the device, and its screen size, resize and optimize the image accordingly.

##Features

• Add the img-wit directive
• Enable out of the box support for the WIT URLs to download more images in parallel.

Usage

Install with bower

• bower install angular-wurfl-image-tailor --save
• Include angular-wurfl-image-tailor.js. It should be located at bower_components/src/angular-wurfl-image-tailor.js

Install from source

• Download Latest Version and extract the archive.
• Include angular-wurfl-image-tailor.js. It should be located at archive_path/src/angular-wurfl-image-tailor.js

How to use it

• Include the angular-wurfl-image-tailor directive dependency on your angular module:

var app = angular.module("demoapp", ["angular-wurfl-image-tailor"]);

• Include the markup directive on your HTML page, like this:

<img-wit src="http://yourserver.com/image.png"></img-wit>

Examples

Check the WURFL Image Tailor Documentation for the list of available settings.

Fully Automatic

<img-wit src="http://yourserver.com/image.png"></img-wit>

20% of screen size

<img-wit src="http://yourserver.com/image.png" pc="20"></img-wit>

Create an image 300px Wide

<img-wit src="http://yourserver.com/image.png" w="300"></img-wit>

Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes

<img-wit src="http://yourserver.com/image.png" w="200" h="200" m="letterbox_000000_100"></img-wit>

Demo

• Run: npm start
• Browse: http://localhost:8000/demo/index.html

Authors

• Luca Corbo — view contributions

License

Licensed under the MIT license. (See the LICENSE file)

Copyright © ScientiaMobile, Inc.