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 80. 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 81. Container.hbs
{{include "Item.hbs" child imageSize="large"}}


Example 82. 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 83. 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 84. Page.hbs
{{include "Container.hbs" container itemImageSize="large"}}


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


Example 86. 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 87. Page.hbs
{{#set imageSize="large"}}
    {{include "Container.hbs" container}}
{{/set}}


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


Example 89. 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 90. Item.hbs
{{#resize image (fallback (get "imageSize") "small")}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />
{{/resize}}