ember-cli-imgix

An Ember addon for easily adding responsive imagery via imgix to your application.

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

ember-cli-imgix exposes a new image container that works will for creating responsive images. It is a <div> element with a single <img> child element. Adding them to your templates is quite easy:

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

The HTML generated by this might look like the following:

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

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

imgix-image-element

For an unwrapped <img> element, use the {{imgix-image-element}} component. This component can also accept an aspectRatio parameter:

{{imgix-image-element path="/users/1.png" crossorigin="anonymous" aspectRatio=1.33}}

This will maintain the same aspect ratio as the image is resized.

Please see the dummy app for insight into setting this up and configuring this.

Running a test app

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

git clone git@github.com:imgix/ember-cli-imgix.git
cd ember-cli-imgix
ember serve

Now visit http://localhost:4200.

Running Tests

Pretty simple:

ember test