Support custom image size variations

[olemarius]

When using height parameter and cropping I experienced some problems with the data.requestedWidth being set to nearest multiple of 160. The actual size of the image would be 800, but it's scaled down using max-width:100%; in css. This affects the height, and result in the image not filling it's static width/height container perfectly.

I solved this by adding s.defaultWidths which will be an array of the widths, and if the data.requestedWidth does not match, it use the 160 rule.

// Added custom widths
if (s.defaultWidths) {
    if (s.defaultWidths.indexOf(data.requestedWidth) === -1) {
        //Minimize variants for caching improvements; round up to nearest multiple of 160
        data.requestedWidth = data.requestedWidth - (data.requestedWidth % 160) + 160; //Will limit to 13 variations
    }
}

Usage:

<script>
    window.slimmage = {
        defaultWidths: [226,468,710,952]
    };
</script>

Didnt think about it before now, but maybe widthVariants would be better name.

[lilith]

This turned out to be a rounding bug, and is fixed in 0.2.4. 800-pixel wide elements now cause 800-pixel wide images to be requested.

If you want to whitelist additional sizes that are not multiples of stepWidth (160), you can do that via window.slimmage.adjustImageParameters.

Example:

window.slimmage = {
   adjustImageParameters: function(data){
      var idealSize = data.width * data.dpr;
      if ([226,468,710,952].indexOf(idealSize) !== -1){
         data.requestedWidth = idealSize;
      }
   }
}