node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Greenkeeper badge

Build Status

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.


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: '',
        debug: true // Prints out diagnostic information on the image itself. Turn off in production.
    // snip


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 src="" >

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:

aspectRatio: null,
path: null,
crop: 'faces',
fit: 'crop', // 
pixelStep: 10, // round to the nearest pixelStep
auto: null,
alt: null, // Alt text of the image
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

This element also exposes an onLoad action which you can hook into to know when the image has loaded:

  onLoad=(action 'handleImageLoad')

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
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.