Support and Documentation

Defining image sizes

Defining image sizes at the module level

You can define image sizes at the module level, overriding image sizes at the theme level. You can use all of the keys listed in the table Keys for image size in module-level data files except for the following:

Table 52. previewWidth and previewHeight at the module level

Key

Description

Type

previewWidth

This key is available at the module level only if the following are true:

  • previewWidth is present in the theme's _config.json for the same template.

  • width is not present in the theme's _config.json for the same template.

Number

previewHeight

This key is available at the module level only if the following are true:

  • previewHeight is present in the theme's _config.json for the same template.

  • height is not present in the theme's _config.json for the same template.

Number



The following snippet describes the height, width, and source set desriptors for a template Image.hbs. These attributes override any of the contextual rendering settings in the theme's _config.json.

{
  "_template": "Image.hbs",
  "height": "900",
  "width": "1600",
  "srcsetDescriptors": [
    "2x",
    "3x"
  ]
}
Defining image sizes at the theme level

Image sizes are defined in the configuration file (see Configuring a theme) of your theme. To define an image, you will at a minimum need to define the width (or maximumWidth) and height (or maximumHeight).

An example configuration file with a single image size definition would look like the following:

{
  "imageSizes": {
    "MyImageSize": {
      "width": 100,
      "height": 100
    }
  }
}