Support and Documentation

Using image sizes

After you define image sizes (see Defining image sizes), you can use the {{resize}} helper to apply a resize to an image object. In a Brightspot theme, rendering an <img> tag should almost always include a usage of the {{resize}} helper.

Basic usage

As a simple example, suppose a component MyComponent.hbs that renders an <img> with an image size named small.

Example 85. MyComponent.hbs
{{#resize image "small"}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}


Container usage

A container will often need to define an image size used by its children.

Example 86. Container.hbs
{{include "Item.hbs" child imageSize="large"}}


Example 87. Item.hbs
{{#resize image imageSize}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}


Providing a fallback

To decouple Item.hbs from Container.hbs, you may want to provide a fallback for when an imageSize property is not specified by a container, or there is no container at all.

Example 88. Item.hbs
{{#resize image (fallback imageSize "small"}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}


In the above example, Item.hbs will render using the small image size, unless a container specifies an imageSize value.

Images with variable helpers

There may be times when the immediate container does not specify the image size necessary. Consider an example in which Page.hbs renders a Container.hbs of Item.hbs, and Page.hbs determines which image size to use.

This could be implemented by passing down the image size through multiple templates:

Example 89. Page.hbs
{{include "Container.hbs" container itemImageSize="large"}}


Example 90. Container.hbs
{{include "Item.hbs" child imageSize=itemImageSize}}


Example 91. Item.hbs
{{#resize image imageSize}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}


However, this quickly becomes unwieldy when you need to pass the image size through multiple contexts. To facilitate these scenarios, you can use the {{get}} and {{set}} helpers.

Example 92. Page.hbs
{{#set imageSize="large"}}
    {{include "Container.hbs" container}}
{{/set}}


Example 93. Container.hbs
{{include "Item.hbs" child}}


Example 94. Item.hbs
{{#resize image (get "imageSize")}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}


Variables with fallback images

You may also wish to define a fallback for when the image size is not specified, using the {{fallback}} helper like so:

Example 95. Item.hbs
{{#resize image (fallback (get "imageSize") "small")}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}