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