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


Example 76. 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 77. 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 78. Page.hbs
{{include "Container.hbs" container itemImageSize="large"}}


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


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


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


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