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


Example 73. 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 74. 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 where Page.hbs renders a Container.hbs of Item.hbs, and Page.hbs should dictate which image size to use.

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

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


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


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


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


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