Customizing your inputs in the data cascade

CloudCannon offers different configuration options for each input and editor. Use this to improve the editing experience for your sites. Configuration can be set from a number of sources, from lowest priority to highest:

  1. Site configuration
  2. Collection configuration
  3. Front matter
  4. Containing array structure
  5. Element data attribute

Inside each of these sources, the configuration groups are _options, _select_data, _instance_values, _array_structures and _comments.

Configuration for inputs and editors is set with properties on the key matching the same name. (e.g. _options.image matches the image front matter input).

Site configuration - configure something everywhere on your site. For example:

_config.yml
_options:
  image_path:
    width: 90
    height: 120
_comments:
  image_path: Helpful message here
_select_data:
  colors:
    - Red
    - Blue

Collection configuration - configure inputs for all files within a collection. For example:

_config.yml
cloudcannon:
  collections:
    pages:
      _options:
        image_path:
          width: 90
          height: 120
      _comments:
        image_path: Helpful message here
      _select_data:
        colors:
          - Red
          - Blue

Front matter - configure inputs inside a single file. For example:

Configuration
image_path: /uploads/me.png
_options:
  image_path:
    width: 90
    height: 120
_comments:
  image_path: Helpful message here
_select_data:
  colors:
    - Red
    - Blue

Containing array structure - configure inputs inside an array structure. For example:

Configuration
_array_structures:
  gallery:
    values:
      - label: Image
        icon: image
        _options:
          image:
            width: 50
            height: 50
        _comments:
          caption: Applies inside this structure
        _select_data:
          colors:
            - Red
            - Blue
        value:
          image: /uploads/placeholder.png
          caption:
Note

For complex structured data, you can nest _array_structures alongside the other configuration groups inside an array structure definition.

Element data attribute - configure _options for a specific element. For example:

page.html
<p class="editable" data-cms-options='{"bold": true, "italic": true}'>...</p>
Was this article helpful? or Suggest an improvement >