Image sizes

Themes are able to define image sizes that fit inside the various components provided by a theme. Using image sizes requires defining an image size in your configuration files (see Configuring a theme) and defining a context in which that image size should be used.

To use an image in your template, first you’ll need to make sure that the API provides an image. This is indicated by the _image value helper in the JSON files for a component.

{
  "_template": "/styleguide/MyComponent.hbs",
  "image": {
    "_image": true
  }
}

Next you can define one or more image sizes in your configuration file as in the following example.

{
  "imageSizes": {
    "small": {
       "width": 100,
       "height": 100
    },
    "medium": {
       "width": 300,
       "height": 300
    },
    "large": {
       "width": 500,
       "height": 500
    }
  }
}

To use one of the above image sizes, you will use the {{resize}} helper:

MyComponent.hbs

{{#resize image "small"}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}