ember-wagtail-images

An addon for using images from the Wagtail CMS with Ember.

Table of Contents

• Compatibility
• Installation
• Usage
• Contributing
• License

Compatibility

• Ember.js v2.18 or above
• Ember CLI v2.13 or above

Installation

ember install ember-wagtail-images

⚠️ This addon requires setting up a custom ServeView for images in Wagtail that doesn't use a security key.

Usage

Configure your Wagtail image path in environment.js.

// config/environment.js

module.exports = function(environment) {
  var ENV = {
    // ...
    APP: {
      wagtailImages: {
        imagePath: 'https://my-wagtail-instance.net/images'
      }
    }
    // ...
  };
};

This addon doesn't mange your image model for you. It expects you to provide an image object or model that has an id key.

const wagtailImage = {
  "id": 32
}

To use the component put something like this into your template.

{{wagtail-image
  image=wagtailImage
  alt="An old red barn."
  resizeWidth="400"
  resizeHeight="300"
}}

Or something like this:

<WagtailImage
  @image={{wagtailImage}}
  alt="An old red barn."
  @resizeWidth="400"
  @resizeHeight="300"
/>

When your page is rendered it will appear like this:

<img src="https://my-wagtail-instance.net/images/32/fill-400x300/" alt="An old red barn.">

There's also a helper if you only want a URL:

<img src={{wagtail-image-url wagtailImage 400 300}} alt="An old red barn.">

See the docs for more options and examples.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.