Image sizes

Themes are able to define image sizes that fit inside the various components provided by a theme. Using image sizes requires defining an image size in your configuration files (see Configuring a theme) and defining a context in which that image size should be used.

To use an image in your template, first you’ll need to make sure that the API provides an image. This is indicated by the _image value helper in the JSON files for a component.

  "_template": "/styleguide/MyComponent.hbs",
  "image": {
    "_image": true

Next you can define one or more image sizes in your configuration file as in the following example.

  "imageSizes": {
    "small": {
       "width": 100,
       "height": 100
    "medium": {
       "width": 300,
       "height": 300
    "large": {
       "width": 500,
       "height": 500

To use one of the above image sizes, you will use the {{resize}} helper:


{{#resize image "small"}}
    <img src="{{src}}" srcset="{{srcset}}" width="{{width}}" height="{{height}}" />

Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Apple News