Using Response.js and PW image API

[Joss]

The PW image API allows you to create different sized, cached versions of images for use in different situations. For instance an original image might be 1000 x 700 px, but we can can crop and resize using:

$newsize = $page->myimage->size(300,300);

And produce a square, cropped and resized image 300 x 300 px.

But how can we make this work in a responsive environment so that we choose an image varient created using the API based on viewport size?

There are several ways to do this, but in this case, a bit of script called Response.js can be rather useful.

Reponse.js allows you to set up a set of parameters for exchanging data on the fly. (Please note that this is NOT an ajax based system, for that, please look up enquire.js)

So, you can tell it to look for a certain sized view port by setting breakpoints and then use that to choose what data you want to call in. So, for instance, on their website they give this example:

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />

The default image is the smallest (thinking mobile first) and then there are two further images called depending on the viewport size. The "data-src481" bit relates to the set up code made for this page or site.

You can see that it would be fairly easy to add the PW image api to that bit of html.

So, onto a real world example I am using in a client's blog.

I had two imediate problems - firstly the site uses EMs and by default, response.js uses px. Secondly, I wanted nice memorable names for my various breakpoints. 

The developer of response.js is a helpful fellow and he wrote me a nice bit of script to do exactly what I want:

!function(Response) {
  var names = ['basic', 'phoneportrait', 'phonelandscape','smalltablet','largetablet','laptop','desktop'];
  var values = {
    phoneportrait: '(min-width:20em)',
    phonelandscape: '(min-width:30.063em)',
    smalltablet: '(min-width:33.125em)', 
    largetablet: '(min-width:48.000em)', 
    laptop: '(min-width:64.063em)', 
    desktop: '(min-width:80.063em)'
  };
  Response.addTest('view', function(breakpoint) {
    var query = values.hasOwnProperty(breakpoint) && values[breakpoint];
    return !query || Response.media(values[breakpoint]).matches;
  }).create({prefix: 'view-', prop: 'view', breakpoints: names, dynamic: true});
}(Response);

This script is in my sitewide javascript file so that it is available for anything I am doing. All this script is doing is setting my em min-width values against names and then using those to create the calls. So, I would call a breakpoint with:

data-view-phoneportrait

Just for interest, this reproduces a set of breakpoints I have using sass-mq for my sass development set up.

Now all I have to do is mix that up with my images,

In the example below, which is for a list of articles in responsive blocks (using the easy to use pocketgrid system) I just swap the image depending on the view port:

$smallimage = $article->image_single->size(256,256);
$mediumimage = $article->image_single->size(300,300);
$largeimage = $article->image_single->size(371,371);

echo "<a href='{$article->url}'><img src='{$smallimage->url}' data-view-smalltablet='{$largeimage->url}' data-view-largetablet='{$mediumimage->url}' data-view-laptop='{$mediumimage->url}' data-view-desktop='{$largeimage->url}'></a>";

Response JS can also swap data within a div, though as I said earlier, this does not use ajax, so is best for small bits and pieces.

I am finding that with the huge versatility of Processwire, this plays very nicely not just with more complete systems like Foundation, but perfectly with far more versatile system made up of small utilities rather than one big do-everything solution.

My tool box now consists of responsejs, enquire, boubon mixins (but I don't use NEAT), various cross browser helpers like respond.js and html5shiv, a very good media query mixin call sass-mq and then my own bits and pieces.

So, the lesson here is that the PW api does not just output data, but is part of your toolset for creating powerful and capable dynamic, responsive, mobile first websites.