Support and Documentation

Image context

Images you upload to Brightspot can appear differently in different places on the front end. The image may have the native size in some pages, and appear larger or smaller in other pages. Brightspot selects the image size to send to the front end based on the image's context—a combination of template and placeholder.

{
  "imageSizeContexts": { 1
    "/styleguide/Image.hbs": { 2
      "image": "large" 3
    }
  }
}

1

Stanza within _config.json that contains image context definitions.

2

Template.

3

Placeholder.

Referring to the previous example, the context is the placeholder {{image}} within the template Image.hbs. In this context, Brightspot uses the image size large.

You can define levels of nested context, a technique that promotes template reuse.

{
  "imageSizeContexts": {
    "/styleguide/ByLine.hbs": {
      "/styleguide/Image.hbs": {
        "image": "small"
      },
      "/styleguide/BioPage.hbs": {
        "/styleguide/Image.hbs": {
          "image": "large"
        }
      }
    }
  }
}

In the previous example, there are two contexts for the template Image.hbs:

  • One context for a byline under the template ByLine.hbs. In this context, Brightspot provides the image size small to the front end.

  • One text for a bio page under the template BioPage.hbs. In this context, Brightspot provides the image size large to the front end.

You can assign an image size to multiple contexts using file globbing.

{
  "imageSizeContexts": {
    "/styleguide/*.hbs": {
      "image": "large"
    }
  }
}

In the previous example, Brightspot uses the image size large in any template whose file name matches the pattern /styleguide/*.hbs. For details about the supported patterns, see Glob Primer.