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
.
{{#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.
{{include "Item.hbs" child imageSize="large"}}
{{#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.
{{#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:
{{include "Container.hbs" container itemImageSize="large"}}
{{include "Item.hbs" child imageSize=itemImageSize}}
{{#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.
{{#set imageSize="large"}} {{include "Container.hbs" container}} {{/set}}
{{include "Item.hbs" child}}
{{#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:
{{#resize image (fallback (get "imageSize") "small")}} <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" /> {{/resize}}