JSON Config and Authoring Tool Options

JSON Config and Authoring Tool Options

Alongside Custom Classes, the Vanilla theme can support 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.

Explanation

_vanilla (object): The following attributes configure the defaults for Vanilla. These include _backgroundImage, _backgroundStyles, and _minimumHeights. Global attributes are available at contentObject, article, and block level.

Global background image

_backgroundImage (object): The backgroundImage object that contains values for _large, _medium, and _small.

Name	Value
_large (string)	File name (including path) of the image used with large device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_medium (string)	File name (including path) of the image used with medium device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_small (string)	File name (including path) of the image used with small device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).

Global background image styles

_backgroundStyles (object): Additional attributes available to customise how background images display. The backgroundStyles object contains values for _backgroundRepeat, _backgroundSize, and _backgroundPosition.

Name	Value
_backgroundRepeat (string)	This attribute defines how the background image repeats. Properties include repeat, repeat-x, repeat-y and no-repeat. repeat-x: The background image is repeated only horizontally. repeat-y: The background image is repeated only vertically.
_backgroundSize (string)	This attribute defines the size the background image display. Properties include auto, cover, contain, and 100% 100%. auto: The background image is displayed in its original size. cover: Resize the background image to cover the entire container, even if it has to stretch or crop the image. contain: Resize the background image to make sure the image is fully visible. 100% 100%: Resize the background image to match the dimensions of the container.
_backgroundPosition (string)	This attribute defines the size the background image position. Properties include left top, left center, left bottom, center top, center center, center bottom, right top, right center, and right bottom. The first value is the horizontal position and the second value is the vertical.

Global minimum heights

_minimumHeights (object): The minimum heights attribute group specifies the minimum height of the image container at different device widths (_large, _medium, and _small).

Name	Value
_large (number)	The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped.
_medium (number)	The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped.
_small (number)	The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped.

Global responsive classes

_responsiveClasses (object): The responsive classes object adds the associated CSS class(es) to the container element at different device widths (_large, _medium, _small). The class(es) are removed between each device width. Useful for applying styles for a particular device width only rather than applying a global _classes style.

Name	Value
_large (string)	Custom CSS class that is applied at the large device width.
_medium (string)	Custom CSS class that is applied at the medium device width.
_small (string)	Custom CSS class that is applied at the small device width.

contentObjects specific

_pageHeader (object): The backgroundImage object that contains values for _large, _medium and _small.

Name	Value
_large (string)	File name (including path) of the image used with large device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_medium (string)	File name (including path) of the image used with medium device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_small (string)	File name (including path) of the image used with small device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).

blocks specific

_isDividerBlock (boolean): Determines whether the CSS class is-divider-block will be applied. Acceptable values are true and false.

_componentVerticalAlignment (string): Defines the vertical alignment of the child component(s) in relation to the block. top: Aligns descendents to the top of the block. center: Aligns descendents to the center of the block. bottom: Aligns descendents to the bottom of the block. The default alignment is top.

Examples

The example.json file provides all of the configurable json properties as a blank canvas to build from in the Adapt Framework.

contentObjects - page

Available options for the page:

"_vanilla": {
  "_backgroundImage": {
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_backgroundStyles": {
    "_backgroundSize": "",
    "_backgroundRepeat": "",
    "_backgroundPosition": ""
  },
  "_responsiveClasses": {
    "_large": "",
    "_medium": "",
    "_small": ""
  }
}

Equivalent Authoring Tool view:

contentObjects - page header

Available options for the page header:

"_vanilla": {
  "_pageHeader": {
    "_backgroundImage": {
      "_large": "",
      "_medium": "",
      "_small": ""
    },
    "_backgroundStyles": {
      "_backgroundSize": "",
      "_backgroundRepeat": "",
      "_backgroundPosition": ""
    },
    "_minimumHeights": {
      "_large": 600,
      "_medium": 400,
      "_small": 200
    }
  }
}

Equivalent Authoring Tool view:

articles

Available options for the article:

"_vanilla": {
  "_backgroundImage": {
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_backgroundStyles": {
    "_backgroundSize": "",
    "_backgroundRepeat": "",
    "_backgroundPosition": ""
  },
  "_responsiveClasses": {
    "_large": "",
    "_medium": "",
    "_small": ""
  }
}

Equivalent Authoring Tool view:

blocks

Available options for the block:

"_vanilla": {
  "_backgroundImage": {
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_backgroundStyles": {
    "_backgroundSize": "",
    "_backgroundRepeat": "",
    "_backgroundPosition": ""
  },
  "_minimumHeights": {
    "_large": 600,
    "_medium": 400,
    "_small": 200
  },
  "_responsiveClasses": {
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_isDividerBlock": false,
  "_componentVerticalAlignment": ""
}

Equivalent Authoring Tool view: