Brightspot CMS Developer Guide

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:

MyComponent.hbs

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

Previous Topic
Configuring a theme
Next Topic
Defining image sizes
Was this topic helpful?
Thanks for your feedback.
The elements that get you up and running in a matter of days, from pre-built content types, to modules, to landing pages.

Content types
Modules
Landing pages
Everything you need to manage and administer content within Brightspot CMS, including plug-and-play integrations.

Dashboards
Authoring content
Workflows
Admin configurations
A guide for installing, supporting and administering code on the Brightspot platform, including integrations requiring developer support to use.

Field types
Content modeling
Rich-text elements
Images