Skip to content
Home button
  • Pricing
Articles
Choose your preferred SSG:
Choose your preferred SSG:

Migrating to input configuration

How you configure inputs in CloudCannon has changed. We recommend updating, but the previous configuration will continue to work. There’s now a consolidated key called _inputs that encompasses our previous keys:

  • _options
  • _comments
  • _instance_values
  • _select_data
  • _structures (renamed from _array_structures)

Having the configuration keys at the top level forced you to redefine your input key multiple times, and spread the configuration for an input across multiple places. This proved to be progressively harder to maintain as you configured more inputs.

The _inputs configuration flips the input and configuration keys from the previous convention, allowing you to define everything for an input in one place.

We’ve also introduced two new configuration settings, type and label. These let you choose which kind of input you want, and what label text is shown separately from the naming conventions.

Input configuration 
anything:
_inputs:
  anything:
    type: markdown
    label: Main Content

Examples

It’s often easier to just see the before and after. Here are some examples covering the previous and current configurations:

Comments

Now set with the comment key.

Old configuration 
brand_color: '#034ad8'
_comments:
  brand_color: Use a bold color here
Input configuration 
brand_color: '#034ad8'
_inputs:
  brand_color:
    comment: Use a bold color here

Options

Now set with the options key.

Old configuration 
hero_image: /uploads/hero.png
_options:
  hero_image:
    width: 500
    height: 600
Input configuration 
hero_image: /uploads/hero.png
_inputs:
  hero_image:
    options:
      width: 500
      height: 600

Instance Values

Now set with the instance_value key.

Old configuration 
_instance_values:
  _uuid: UUID
  created_at: NOW
Input configuration 
_inputs:
  _uuid:
    instance_value: UUID
  created_at:
    instance_value: NOW

Select data

There are no changes to _select_data itself:

Input configuration 
animal: Cow
_select_data:
  animals:
    - Cat
    - Cow

You can now choose the select values (separately from the naming convention) for a select or multiselect input with values. Either define the values directly:

Input configuration 
animal: Cow
_inputs:
  animal:
    type: select
    options:
      values:
        - Cat
        - Cow

Or reference _select_data defined anywhere in the configuration cascade:

Input configuration 
animal: Cow
_inputs:
  animal:
    type: select
    options:
      values: _select_data.mammals
_select_data:
  mammals:
    - Cat
    - Cow

Structures

Array Structures are now called Structures, and configured with _structures instead of _array_structures. Outside of this rename, there are no changes to the configuration itself:

Input configuration 
gallery:
_structures:
  gallery:
    style: modal
    values:
      - label: Image
        icon: image
        value:
          image: /uploads/placeholder.png
          caption:
      - label: External link
        icon: link
        value:
          url:
          title:

You can now choose the structures (separately from the naming convention) for an array input with structures. Either define the values directly:

Input configuration 
gallery:
_inputs:
  gallery:
    type: array
    options:
      structures:
        style: modal
        values:
          - label: Image
            icon: image
            value:
              image: /uploads/placeholder.png
              caption:
          - label: External link
            icon: link
            value:
              url:
              title:

Or reference _structures defined anywhere in the configuration cascade:

Input configuration 
gallery:
_inputs:
  gallery:
    type: array
    options:
      structures: _structures.media_items
_structures:
  media_items:
    style: modal
    values:
      - label: Image
        icon: image
        value:
          image: /uploads/placeholder.png
          caption:
      - label: External link
        icon: link
        value:
          url:
          title:

Where to configure inputs

The _inputs configuration is set alongside the inputs in the examples above. You can set it anywhere in the configuration cascade, just as the previous keys allowed. The keys inside _inputs entries are merged across the cascade, allowing you to overwrite or combine more specific configurations (e.g. setting comments globally and options per file).

_select_data and _structures are defined in the configuration cascade as well, so you can set them with or separately to _inputs.

Other changes

  • Color inputs have new format and alpha options, falling back to the naming convention if these options are not set.
  • Hiding inputs is now set with hidden in an _inputs entry rather than an option, since it’s available for any input type. This key also supports a string where the input is hidden based on the value of another input. This can start with a ! to reverse the value.
  • Object structures are now supported. These allow you to configure objects between an empty state (null) and a selection of object formats. Useful if you have components with a limited number of sub-components.
  • Two new inputs: Range number input and a Switch boolean input. These are only available with the new inputs config. More input types coming soon, contact support if you have specific requests.
  • Comments now support a limited set of Markdown: links, bold, italic, subscript, superscript and inline code elements are allowed. Links in this block also support Editor Links.
Was this article helpful? or Suggest an improvement >

Related articles

Using Text Inputs to edit your data Details for setting up and using different types of plain text inputs for editing your data.
Using Rich Text Inputs to edit your HTML and Markdown data These inputs give your editors ultimate control by allowing them to write markup directly into your data files.
Using Social Inputs to edit your data These inputs are for editing plain text in your data. Each input includes a specific brand icon.
Using Code Inputs to edit your data Code editor input for blocks of code or mono-space plain text.
Using Boolean Inputs to edit your data These inputs are for editing true/false values in your data. They can be triggered on or off.
Using Color Inputs to edit your data Color picker input with spectrum and transparency controls for editing color values in your data.
Using Number Inputs to edit your data These inputs are for editing numerical values in your data.
Using URL Inputs to edit your data Single line input for relative, absolute and fully qualified URLs. URL inputs show a preview of the target.
Using Date and Time Inputs to edit your data These inputs are for editing date and time values in your data.
Using file path inputs to edit your data These inputs allow editors to upload new files, select existing images, or link to external files.
Using Select inputs to edit your data These inputs are for values from a fixed or dynamic set of options. Useful for linking across pages, collections and data sets.
Using Object Inputs to edit your data Object inputs in your data show as a button in the data editor. This button opens a new editor to the side, showing the inputs inside that object. This continues as you click into nested Object inputs. Each object level has a back button to return to the parent scope.
Using Array Inputs to edit your data These inputs are for editing ordered lists of values in your data. Array inputs are grouped lists of inputs in the data editor. They are used for a wide range of use cases, ranging from small text lists to full component builders.
Using the configuration 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.