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 { 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:
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 imageaspectRatio: nullcrop: 'faces'fit: 'crop'pixelStep: 10 // round to the nearest pixelSteponLoad: nullonError: nullcrossorigin: 'anonymous'alt: '' // image altoptions: {} // arbitrary imgix optionsauto: null // https://docs.imgix.com/apis/url/auto width: null // override if you want to hardcode a width into the imageheight: 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:
;
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.gitcd ember-imgixember 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.