JSON Config and Authoring Tool Options

JSON Config / Authoring Tool Options

Alongside Custom Classes the Vanilla theme can support additional visual enhancements available either through manual entry via the JSON (Framework) or by configuration via the interface (Authoring Tool). These extras are entirely optional and not every property requires data.

Content Object

Page

Apply the following settings to add, and customise, a page background image.

Available options for the page:

"_vanilla": {
  "_backgroundImage": {
    "_large": "course/en/images/example.jpg",
    "_medium": "course/en/images/example.jpg",
    "_small": "course/en/images/example.jpg"
  },
  "_backgroundStyles": {
    "_backgroundSize": "contain",
    "_backgroundRepeat": "repeat",
    "_backgroundPosition": "center center"
  },
  "_responsiveClasses": {
    "_large": "class-large",
    "_medium": "class-medium",
    "_small": "class-small"
  }
}

Equivalent Authoring Tool view:

Page header

Apply the following settings to add, and customise, a page header background image or define a minimum height for the page header element.

Available options for the page header:

"_vanilla": {
  "_pageHeader": {
    "_backgroundImage": {
      "_large": "course/en/images/example.jpg",
      "_medium": "course/en/images/example.jpg",
      "_small": "course/en/images/example.jpg"
    },
    "_backgroundStyles": {
      "_backgroundSize": "contain",
      "_backgroundRepeat": "repeat",
      "_backgroundPosition": "center center"
    },
    "_minimumHeights": {
      "_large": 600,
      "_medium": 400,
      "_small": 200
    }
  }
}

Equivalent Authoring Tool view:

Articles

Apply the following settings to add, and customise, an article background image.

Available options for the article:

"_vanilla": {
  "_backgroundImage": {
    "_large": "course/en/images/example.jpg",
    "_medium": "course/en/images/example.jpg",
    "_small": "course/en/images/example.jpg"
  },
  "_backgroundStyles": {
    "_backgroundSize": "contain",
    "_backgroundRepeat": "repeat",
    "_backgroundPosition": "center center"
  },
  "_responsiveClasses": {
    "_large": "class-large",
    "_medium": "class-medium",
    "_small": "class-small"
  }
}

Equivalent Authoring Tool view:

Blocks

Apply the following settings to add, and customise, a block background image, define a minimum height for the block element or mark the block as a divider.

The _isDividerBlock property at present adds a custom class .is-divider-block to the block element but there is no styling attached to this class.

Available options for the block:

"_vanilla": {
  "_backgroundImage": {
    "_large": "course/en/images/example.jpg",
    "_medium": "course/en/images/example.jpg",
    "_small": "course/en/images/example.jpg"
  },
  "_backgroundStyles": {
    "_backgroundSize": "contain",
    "_backgroundRepeat": "repeat",
    "_backgroundPosition": "center center"
  },
  "_minimumHeights": {
    "_large": 600,
    "_medium": 400,
    "_small": 200
  },
  "_responsiveClasses": {
    "_large": "class-large",
    "_medium": "class-medium",
    "_small": "class-small"
  },
  "_isDividerBlock": false,
  "_componentVerticalAlignment": "center"
}

Equivalent Authoring Tool view: