Image Resizing the Super-Easy Way, Thanks to Angular and WURFL Image Tailor (WIT)

Image Resizing the Super-Easy Way, Thanks to Angular and WURFL Image Tailor (WIT)

angularjs

 

 

By Luca Corbo, Senior Engineer @ScientiaMobile

 

Last week, ScientiaMobile introduced the WURFL Image Tailor (WIT). WIT makes it easy for front-end designers to access our image resizing service using the <img/> HTML tag code.  Having become familiar with Angular.js (and having become one of its biggest admirers in the process), I immediately started playing with the idea of marrying the power of WIT with the elegance of Angular.  A few hours later, I came up with the solution that I am happy to present here. The code can be obtained at:

 

https://github.com/WURFL/angular-wurfl-image-tailor

This first step is to download the directive from here , include the angular-wurfl-image-tailor.js script  and include the angular-wurfl-image-tailor directive in your angular module:

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

Now, you can use the <img-wit> tag virtually identically to how you use the classic image tag:

<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg"> </img-wit>

Now, the image will be piped through WIT, but without the burden of hacking your image URL to a different format.

But that’s not all.

By default, if you access the page with a mobile device,  the picture will automatically be resized based on your screen size.

However, if you know what you are doing and you want more control, you can have more control through the extra “tailoring” directives and be a master  over width, height, letterboxing and other features that WIT provides.  Parameters such as    w=”200″or h=”200″   allow you control and optimize for height or width, with no need to piggyback those parameters on the URL itself. The following examples illustrate the points:

 

Create a 300px Wide Image

<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="300"></img-wit>

Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes

<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="200" h="200" m="letterbox_000000_100"> </img-wit>

This is elegant. Thank you WURFL.io and thank you, Angular.js