ember-imgix

ember-imgix

DEMO

An Ember addon for easily adding responsive imagery via imgix to your application. As your components resize, we will fetch new optimized imgix images. Uses ember-singularity under the hood for efficient and massively gangster event handling.

Works with FastBoot

Note: Front-end imgix libraries and framework integrations will not work with imgix Web Proxy Sources. They will only work with imgix Web Folder or S3 Sources.

Installation

From within an existing ember-cli project:

$ ember install ember-imgix

Next, set up some configuration flags:

// config/environment.js

module.exports = function(environment) {
  var ENV = {
    // snip
    APP: {
      imgix: {
        source: 'my-social-network.imgix.net',
        debug: true // Prints out diagnostic information on the image itself. Turn off in production.
      }
    }
    // snip
  }
};

Usage

This addon exposes a single component imgix-image that you will want to use.

{{imgix-image path='/users/1.png'}}

The HTML generated by this might look like the following:

<img class="imgix-image" src="https://my-social-network.com/users/1.png?w=400&h=300&dpr=1" >

The src attribute will have imgix URL API parameters added to it to perform the resize.

Note! This element works by calculating the width/height from its parent. If its parent has no width/height, then this component will do nothing.

You can pass through most of the params that imgix urls accept.

Some of the defaults are:

path: null, // The path to your image
aspectRatio: null,
crop: 'faces',
fit: 'crop',
pixelStep: 10, // round to the nearest pixelStep
onLoad: null,
onError: null,
crossorigin: 'anonymous',
alt: '', // image alt
options: {}, // arbitrary imgix options
auto: null, // https://docs.imgix.com/apis/url/auto

width: null, // override if you want to hardcode a width into the image
height: null, // override if you want to hardcode a height into the image

If you want to pass in any other arbitrary imgix options, use the hash helper

{{imgix-image
  path='/users/1.png'
  options=(hash
    invert=true
  )
}}

This element also exposes onLoad and onError actions which you can hook into to know when the image has loaded or failed to load:

{{imgix-image
  path='/users/1.png'
  onLoad=(action 'handleImageLoad')
  onError=(action 'handleImageError')
}}

Imgix Core JS

Imgix core js is available to you shimmed as:

import ImgixCoreJs from 'imgix-core-js';

Running Tests

To see this in action with some stock photos, clone this repo and then run ember serve

git clone [e-mail]:Duder-onomy/ember-imgix.git
cd ember-imgix
ember serve

Now visit http://localhost:4200.

Running Tests

Pretty simple:

ember test

This is heavily inspired by ember-cli-imgix, except I have re-written all the pertinent bits.