ember-imgix v1.6.0
ember-imgix
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 git@github.com: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.