CloudCannon Configuration (Collection Structures)

This key defines the maximum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too long.

If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any non-negative integer.

If this key is set to 0, CloudCannon requires the Input to be empty.

If options.min_length is also configured, this key cannot be a smaller number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input limits you to a maximum of 125 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_length.

This key requires you to define options.max_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the minimum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too short.

If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any positive integer.

If options.max_length is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input requires a minimum of 25 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.min_length.

This key requires you to define options.min_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the maximum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_words.

This key defines the minimum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_words.

This key defines the maximum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_graphemes.

This key defines the minimum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_graphemes.

This key defines the locale that CloudCannon uses to determine the number of words or graphemes in this Input, if you have max_words, min_words, max_graphemes, or min_graphemes configured.

This key defines a regular expression that the Input value must match.

When configured, CloudCannon will require you to enter a value that matches the REGEX pattern.

If the Input already contains an invalid value, CloudCannon will require you to enter a valid string to save your changes, or discard your unsaved changes.

Value must be a valid REGEX string.

If your REGEX string includes a \ character and CloudCannon Configuration File is a .yml file, use single quotes ' around the string to avoid a build error.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to add an email address to the contact_email Input using the correct email format.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines a custom error message that explains why a value has failed the validation criteria from options.pattern.

This key requires you to define options.pattern.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use the correct email format in the contact_email Input using a pattern message.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines the flags (e.g. case-insensitive searching) for the regular expression set in options.pattern.

Examples

In this example, we have configured pattern flags for a text input to enable case-insensitive searching.

_inputs:
  search_term:
    type: text
    options:
      pattern: "^[a-z]+$"
      pattern_flags:
        ignore_case: true

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines the text shown when this input has no value.

Examples

In this example, we have configured a placeholder for a Text Input.

_inputs:
  title:
    type: text
    options:
      placeholder: Enter a title

This key defines the icon shown beside the input.

Examples

In this example, we have configured an icon for the Text Input title.

_inputs:
  title:
    type: text
    options:
      icon: title

This key defines the color of the icon displayed beside a Text Input.

The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.

Examples

In this example, we have configured the icon color for a text input with an array of values to provide fallback options. CloudCannon will use the value of icon_color first, then fall back to the static hex color value.

_inputs:
  email_address:
    type: text
    label: Email
    options:
      icon: email
      icon_color:
        - key: icon_color
        - text: '#2196F3'

In this example, we have configured the icon color to use a static CSS color value.

_inputs:
  phone_number:
    type: text
    label: Phone
    options:
      icon: phone
      icon_color:
        - text: 'blue'

This key defines the background color of the icon displayed beside a Text Input.

The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.

Examples

In this example, we have configured the icon background color for a text input with an array of values to provide fallback options. CloudCannon will use the value of icon_bg_color first, then fall back to the static hex color value.

_inputs:
  email_address:
    type: text
    label: Email
    options:
      icon: email
      icon_background_color:
        - key: icon_bg_color
        - text: '#e3f2fd'

In this example, we have configured the icon background color to use a static CSS color value.

_inputs:
  phone_number:
    type: text
    label: Phone
    options:
      icon: phone
      icon_background_color:
        - text: 'lightblue'

This key defines the maximum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too long.

If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any non-negative integer.

If this key is set to 0, CloudCannon requires the Input to be empty.

If options.min_length is also configured, this key cannot be a smaller number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input limits you to a maximum of 125 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_length.

This key requires you to define options.max_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the minimum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too short.

If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any positive integer.

If options.max_length is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input requires a minimum of 25 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.min_length.

This key requires you to define options.min_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the maximum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_words.

This key defines the minimum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_words.

This key defines the maximum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_graphemes.

This key defines the minimum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_graphemes.

This key defines the locale that CloudCannon uses to determine the number of words or graphemes in this Input, if you have max_words, min_words, max_graphemes, or min_graphemes configured.

This key defines a regular expression that the Input value must match.

When configured, CloudCannon will require you to enter a value that matches the REGEX pattern.

If the Input already contains an invalid value, CloudCannon will require you to enter a valid string to save your changes, or discard your unsaved changes.

Value must be a valid REGEX string.

If your REGEX string includes a \ character and CloudCannon Configuration File is a .yml file, use single quotes ' around the string to avoid a build error.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to add an email address to the contact_email Input using the correct email format.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines a custom error message that explains why a value has failed the validation criteria from options.pattern.

This key requires you to define options.pattern.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use the correct email format in the contact_email Input using a pattern message.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines the flags (e.g. case-insensitive searching) for the regular expression set in options.pattern.

Examples

In this example, we have configured pattern flags for a text input to enable case-insensitive searching.

_inputs:
  search_term:
    type: text
    options:
      pattern: "^[a-z]+$"
      pattern_flags:
        ignore_case: true

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines the text shown when this input has no value.

Examples

In this example, we have configured a placeholder for a Textarea Input.

_inputs:
  description:
    type: textarea
    options:
      placeholder: Enter a description

This key toggles whether a character counter is shown below the input.

Setting this key to true will show a character counter below the input.

Examples

In this example, CloudCannon will show a character counter below the Textarea Input.

_inputs:
  description:
    type: textarea
    options:
      show_count: true

This key defines the number of spaces inserted when the Tab key is pressed in a Code Input.

The value is a number representing the number of spaces. This affects both indentation behavior and how existing tabs are displayed.

Examples

In this example, we have configured a code input to use 4 spaces for indentation instead of the default 2.

_inputs:
  python_code:
    type: code
    label: Python Code
    options:
      tab_size: 4

This key defines the color theme used for syntax highlighting in Code Inputs.

By default, this key is basic_dark.

Examples

In this example, we have configured a code input to use the dracula theme for a dark-colored editing experience.

_inputs:
  javascript_code:
    type: code
    label: JavaScript
    options:
      theme: dracula

This key toggles whether CloudCannon displays line numbers in the gutter of Code Inputs.

Setting this key to false will hide line numbers in the left gutter of the code editor.

By default, this key is true (i.e., line numbers are displayed).

Examples

In this example, we have configured a code input to hide line numbers by setting show_gutter to false.

_inputs:
  css_code:
    type: code
    label: Custom CSS
    options:
      show_gutter: false

This key toggles whether long lines wrap to the next line in Code Inputs.

Setting this key to true will wrap lines that exceed the width of the code area to the next line without adding a line break character.

By default, this key is false (i.e., long lines extend horizontally and require horizontal scrolling).

Examples

In this example, we have configured a code input to enable soft line wrapping for better readability of long lines.

_inputs:
  markdown_content:
    type: code
    label: Markdown
    options:
      soft_wrap: true

This key defines the maximum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too long.

If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any non-negative integer.

If this key is set to 0, CloudCannon requires the Input to be empty.

If options.min_length is also configured, this key cannot be a smaller number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input limits you to a maximum of 125 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_length.

This key requires you to define options.max_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the minimum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too short.

If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any positive integer.

If options.max_length is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input requires a minimum of 25 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.min_length.

This key requires you to define options.min_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the maximum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_words.

This key defines the minimum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_words.

This key defines the maximum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_graphemes.

This key defines the minimum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_graphemes.

This key defines the locale that CloudCannon uses to determine the number of words or graphemes in this Input, if you have max_words, min_words, max_graphemes, or min_graphemes configured.

This key defines a regular expression that the Input value must match.

When configured, CloudCannon will require you to enter a value that matches the REGEX pattern.

If the Input already contains an invalid value, CloudCannon will require you to enter a valid string to save your changes, or discard your unsaved changes.

Value must be a valid REGEX string.

If your REGEX string includes a \ character and CloudCannon Configuration File is a .yml file, use single quotes ' around the string to avoid a build error.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to add an email address to the contact_email Input using the correct email format.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines a custom error message that explains why a value has failed the validation criteria from options.pattern.

This key requires you to define options.pattern.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use the correct email format in the contact_email Input using a pattern message.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines the flags (e.g. case-insensitive searching) for the regular expression set in options.pattern.

Examples

In this example, we have configured pattern flags for a text input to enable case-insensitive searching.

_inputs:
  search_term:
    type: text
    options:
      pattern: "^[a-z]+$"
      pattern_flags:
        ignore_case: true

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines the maximum number of visible lines for this input, effectively controlling maximum height.

When the containing text exceeds this number, the input becomes a scroll area.

This key defines the minimum number of visible lines for this input, effectively controlling initial height.

When the containing text exceeds this number, the input grows line by line to the lines defined by max_visible_lines.

This key defines how the editor parses your content for syntax highlighting.

Should be set to the language of the code going into the input.

This key defines the maximum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too long.

If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any non-negative integer.

If this key is set to 0, CloudCannon requires the Input to be empty.

If options.min_length is also configured, this key cannot be a smaller number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input limits you to a maximum of 125 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_length.

This key requires you to define options.max_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the minimum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too short.

If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any positive integer.

If options.max_length is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input requires a minimum of 25 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.min_length.

This key requires you to define options.min_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the maximum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_words.

This key defines the minimum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_words.

This key defines the maximum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_graphemes.

This key defines the minimum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_graphemes.

This key defines the locale that CloudCannon uses to determine the number of words or graphemes in this Input, if you have max_words, min_words, max_graphemes, or min_graphemes configured.

This key defines a regular expression that the Input value must match.

When configured, CloudCannon will require you to enter a value that matches the REGEX pattern.

If the Input already contains an invalid value, CloudCannon will require you to enter a valid string to save your changes, or discard your unsaved changes.

Value must be a valid REGEX string.

If your REGEX string includes a \ character and CloudCannon Configuration File is a .yml file, use single quotes ' around the string to avoid a build error.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to add an email address to the contact_email Input using the correct email format.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines a custom error message that explains why a value has failed the validation criteria from options.pattern.

This key requires you to define options.pattern.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use the correct email format in the contact_email Input using a pattern message.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines the flags (e.g. case-insensitive searching) for the regular expression set in options.pattern.

Examples

In this example, we have configured pattern flags for a text input to enable case-insensitive searching.

_inputs:
  search_term:
    type: text
    options:
      pattern: "^[a-z]+$"
      pattern_flags:
        ignore_case: true

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines what format the color value is saved as.

Defaults to the naming convention, or "hex" if that is unset.

This key toggles whether CloudCannon will show a control for adjusting the transparency of the selected color.

Setting this key to true will show a control for adjusting the transparency of the selected color.

By default, this key uses the naming convention (i.e., enabled if the input key ends with "a").

This key defines a predefined color palette for Color Inputs.

The value is an array of color strings. Each string can be a hex code (e.g., #ff0000), CSS color name, or other valid color format.

When a palette is configured, users can select colors from the palette in addition to using the color picker (unless hide_picker is set to true).

Examples

In this example, we have configured a color input with a palette of brand colors for quick selection.

_inputs:
  primary_color:
    type: color
    label: Primary Color
    options:
      palette:
        - '#ff0000'
        - '#00ff00'
        - '#0000ff'
        - '#ffff00'

In this example, we have configured a color input with a palette using CSS color names.

_inputs:
  accent_color:
    type: color
    label: Accent Color
    options:
      palette:
        - red
        - blue
        - green
        - yellow

This key toggles whether CloudCannon hides the color picker UI in Color Inputs.

Setting this key to true will hide the color picker interface, requiring users to enter color values manually or select from a palette if one is configured.

By default, this key is false (i.e., the color picker is displayed).

Examples

In this example, we have configured a color input to hide the picker UI, requiring users to select from the predefined palette or enter values manually.

_inputs:
  brand_color:
    type: color
    label: Brand Color
    options:
      palette:
        - '#ff0000'
        - '#00ff00'
        - '#0000ff'
      hide_picker: true

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines a number that specifies the granularity that the value must adhere to, or the special value any, which allows any decimal value between max and min.

Examples

In this example, we have configured a Range Input to use a step value of 5.

_inputs:
  rating:
    type: range
    options:
      min: 0
      max: 100
      step: 5

This key defines a custom error message that explains why a value has failed the validation criteria from options.min. This key requires you to define options.min.

This key has no default.

This key is available for Number Inputs.

Examples

In this example, we prompt our team to enter a valid number using a custom message.

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      max_message: Cannot be more than 5
      min: 1
      min_message: Cannot be less than 1

This key defines a custom error message that explains why a value has failed the validation criteria from options.max. This key requires you to define options.max.

This key has no default.

This key is available for Number Inputs.

Examples

In this example, we prompt our team to enter a valid number using a custom message.

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      max_message: Cannot be more than 5
      min: 1
      min_message: Cannot be less than 1

This key defines the minimum numerical value CloudCannon will allow in an Input.

When configured, CloudCannon will prevent you from entering a lesser numerical value.

If the Input already contains a lesser numerical value, CloudCannon will require you to enter a valid value to save your changes, or discard your unsaved changes.

This key is required for range inputs.

Value can be any number.

If options.max is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Number Inputs.

Examples

In this example, we want to add a rating out of five for each article in our travel blog using the rating Input. This Input limits you to a minimum rating of one.

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      min: 1

This key defines the maximum numerical value CloudCannon will allow in an Input.

When configured, CloudCannon will prevent you from entering a greater numerical value.

If the Input already contains a greater numerical value, CloudCannon will require you to enter a valid value to save your changes, or discard your unsaved changes.

This key is required for range inputs.

Value can be any integer.

If options.min is also configured, this key cannot be a lesser number.

This key has no default.

This key is available for Number Inputs.

Examples

In this example, we want to add a rating out of five for each article in our travel blog using the rating Input. This Input limits you to a maximum rating of five.

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      min: 1

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines a number that specifies the granularity that the value must adhere to, or the special value any, which allows any decimal value between max and min.

Examples

In this example, we have configured a Range Input to use a step value of 5.

_inputs:
  rating:
    type: range
    options:
      min: 0
      max: 100
      step: 5

This key defines a custom error message that explains why a value has failed the validation criteria from options.min. This key requires you to define options.min.

This key has no default.

This key is available for Number Inputs.

Examples

In this example, we prompt our team to enter a valid number using a custom message.

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      max_message: Cannot be more than 5
      min: 1
      min_message: Cannot be less than 1

This key defines a custom error message that explains why a value has failed the validation criteria from options.max. This key requires you to define options.max.

This key has no default.

This key is available for Number Inputs.

Examples

In this example, we prompt our team to enter a valid number using a custom message.

_inputs:
  rating:
    type: number
    comment: How highly did you rate this experience?
    options:
      max: 5
      max_message: Cannot be more than 5
      min: 1
      min_message: Cannot be less than 1

This key defines what format an image is converted to prior to upload.

Examples

In this example, we have configured an Image Input to convert images to WebP format prior to upload.

_inputs:
  hero_image:
    type: image
    options:
      mime_type: image/webp

This key defines how image files are resized prior to upload, using a bounding box defined by width and height options.

Valid values are cover, contain, crop, or stretch:

• cover keeps aspect ratio and ensures the image covers the bounding box
• contain keeps aspect ratio and ensures the image fits inside the bounding box
• crop prompts the user with and interface to select an aspect-ratio-respecting area
• stretch ignores aspect ratio and resizes the image to the bounding box

This key does not apply to existing images, and does not work if width and height options are not defined.

Examples

In this example, we have configured an Image Input to resize images using the cover style to ensure images cover the bounding box while maintaining aspect ratio.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover

This key defines the width of the bounding box used in the resizing method defined by resize_style.

This key defines the height of the bounding box used in the resizing method defined by resize_style.

Examples

In this example, we have configured the height of the bounding box for an Image Input.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover

This key defines whether you can upscale an image to fit the bounding box while resizing an image prior to upload.

Has no effect if files are not resized.

Examples

In this example, we have configured an Image Input to allow upscaling images to fit the bounding box while resizing.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      expandable: true

This key toggles whether CloudCannon will instruct a rich text editor to save width and height attributes on image elements.

Setting this key to true will instruct the rich text editor to save width and height attributes on image elements. This can prevent pop-in as a page loads.

By default, this key is false (i.e., width and height attributes are not saved on image elements). This defaults to true if the Image Size Attributes site flag is enabled (this is enabled for sites created before June 23 2023, in order to keep those sites working).

Examples

In this example, CloudCannon will save width and height attributes on image elements in a Rich Text Input.

_inputs:
  content:
    type: markdown
    options:
      image_size_attributes: true

This key defines which sources and DAMs you are allowed to upload to and browse.

The value can be an array of strings. Valid values include site-files and the reference key for any DAM connected to your site.

If site-files is omitted from the array, site files will not be available as an asset source for this input.

Examples

In this example, we have configured allowed sources for an Image Input.

_inputs:
  image:
    type: image
    options:
      allowed_sources:
        - site-files
        - my-cloudinary-dam

This key toggles whether CloudCannon will skip the image resizing process configured for this input when selecting existing images.

Setting this key to true will skip the image resizing process when selecting existing images.

Examples

In this example, CloudCannon will skip the image resizing process when selecting existing images for an Image Input.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      prevent_resize_existing_files: true

This key defines definitions for creating additional images of different sizes when uploading or selecting existing files.

Examples

In this example, we have configured an Image Input to create additional images of different sizes when uploading or selecting files.

_inputs:
  hero_image:
    type: image
    options:
      sizes:
        - size: 2x
        - size: 3x

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to bold selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to bold selected text.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to copy formatting from selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to copy formatting from selected text. Applies to bold, italic, underline, strike, subscript, and superscript formatting. Does not copy other styles or formatting.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to italicize selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to italicize selected text.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to create a hyperlink around selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to create a hyperlink around selected text.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to redo recent edits undone with undo.

Setting this key to true will enable a tool in your WYSIWYG toolbar to redo recent edits. Undo is always enabled through standard OS-specific keyboard shortcuts.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to remove formatting from selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to remove formatting. Applies to bold, italic, underline, strike, subscript, and superscript formatting. Does not remove other styles or formatting.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to strike through selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to strike through selected text.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to subscript selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to subscript selected text.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to superscript selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to superscript selected text.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to underline selected text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to underline selected text.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to undo recent edits.

Setting this key to true will enable a tool in your WYSIWYG toolbar to undo recent edits. Undo is always enabled through standard OS-specific keyboard shortcuts.

This key toggles whether CloudCannon will allow you to strip custom markup from content edited in a rich text editor, allowing you to clean files of unnecessary HTML content.

Setting this key to true will enable stripping custom markup from content. The remove_custom_markup key is disabled if allow_custom_markup is enabled.

This key toggles whether CloudCannon will allow you to edit custom markup in rich text editors and explicitly accept the risk of unintentionally deleting elements that cannot be recreated.

Setting this key to true will enable editing of custom markup. When using allow_custom_markup outside of editable regions, content that uses JavaScript will not be editable for security reasons. These inputs will appear as uneditable snippets.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to wrap selected blocks of text in a block quote.

Setting this key to true will enable a tool in your WYSIWYG toolbar to wrap selected blocks of text in a block quote.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert an unordered list or convert selected text to an unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert an unordered list or convert selected text to an unordered list.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to center align selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to center align selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

This key toggles whether CloudCannon will display a control in your WYSIWYG toolbar to create an inline code element, containing any selected text.

Setting this key to true will enable a control in your WYSIWYG toolbar to create an inline code element.

By default, this key is false (i.e., the inline code control is not displayed).

This key toggles whether CloudCannon will display a control in your WYSIWYG toolbar to insert a code block in editable regions.

Setting this key to true will enable a control in your WYSIWYG toolbar to insert a code block.

By default, this key is false (i.e., the code block control is not displayed).

This key toggles whether CloudCannon will display tools in your WYSIWYG toolbar to turn selected text into inline code and selected text into a code block.

Setting this key to true will enable two tools in your WYSIWYG toolbar to turn selected text into inline code and selected text into a code block.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a region of raw HTML for YouTube, Vimeo, social media posts, or other media.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a region of raw HTML. Embedded content is sanitized to mitigate XSS risks, which includes removing style tags. Embeds containing script tags are not loaded a rich text editor.

This key toggles whether CloudCannon will display a dropdown menu tool in your WYSIWYG toolbar for structured text.

Setting this key to true will enable a dropdown menu tool in your WYSIWYG toolbar for structured text. Valid values include for p, h1, h2, h3, h4, h5, h6, pre, address, and div. Include a space between each values, e.g. format: p h1 h2.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a horizontal line.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a horizontal line.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert an image and enter alternative text and title text.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert an image. Select an existing image, upload an image, or use an external link.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to increase the indentation of a list item in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to increase the indentation of a list item.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to justify selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to justify selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to left align selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to left align selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert an ordered list or convert selected text to an ordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert an ordered list or convert selected text to an ordered list.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to decrease the indentation of a list item in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to decrease the indentation of a list item.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to right align selected text by toggling a class name for that text block.

Setting this key to true will enable a tool in your WYSIWYG toolbar to right align selected text. The value is the class name to align the text. The styles for this class must be defined in the styles file.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a Snippet, if any are available.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a Snippet.

This key toggles whether CloudCannon will display a dropdown menu in your WYSIWYG toolbar to apply a style to selected text.

Examples

In this example, we have enabled a dropdown menu in our WYSIWYG toolbar to apply a style to selected text. The styles are defined in the /css/styles.css file.

_editables:
  content:
    styles: /css/styles.css

This example file defines the styles that CloudCannon can add to your WYSIWYG toolbar.

/* Can be applied to blocks of content */
p.callout {
  margin: 10px;
  border: 1px solid #f5f5f5;
  background-color: #eee;
}

/* Can be applied to inline content */
span.big-blue-text {
  font-size: 2rem;
  color: blue;
}

/* Applied to content, excluded from style dropdown */
h2 {
  font-family: cursive;
}

/* Applied to content, excluded from style dropdown */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to insert a table.

Setting this key to true will enable a tool in your WYSIWYG toolbar to insert a table. Further table options are available from the table context menu in the rich text editor.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to merge a list item with the item above it in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to merge a list item with the item above it.

This key toggles whether CloudCannon will display a tool in your WYSIWYG toolbar to merge a list item with the item below it in an ordered or unordered list.

Setting this key to true will enable a tool in your WYSIWYG toolbar to merge a list item with the item below it.

This key defines the maximum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too long.

If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any non-negative integer.

If this key is set to 0, CloudCannon requires the Input to be empty.

If options.min_length is also configured, this key cannot be a smaller number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input limits you to a maximum of 125 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_length.

This key requires you to define options.max_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the minimum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too short.

If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any positive integer.

If options.max_length is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input requires a minimum of 25 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.min_length.

This key requires you to define options.min_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the maximum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_words.

This key defines the minimum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_words.

This key defines the maximum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_graphemes.

This key defines the minimum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_graphemes.

This key defines the locale that CloudCannon uses to determine the number of words or graphemes in this Input, if you have max_words, min_words, max_graphemes, or min_graphemes configured.

This key defines a regular expression that the Input value must match.

When configured, CloudCannon will require you to enter a value that matches the REGEX pattern.

If the Input already contains an invalid value, CloudCannon will require you to enter a valid string to save your changes, or discard your unsaved changes.

Value must be a valid REGEX string.

If your REGEX string includes a \ character and CloudCannon Configuration File is a .yml file, use single quotes ' around the string to avoid a build error.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to add an email address to the contact_email Input using the correct email format.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines a custom error message that explains why a value has failed the validation criteria from options.pattern.

This key requires you to define options.pattern.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use the correct email format in the contact_email Input using a pattern message.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines the flags (e.g. case-insensitive searching) for the regular expression set in options.pattern.

Examples

In this example, we have configured pattern flags for a text input to enable case-insensitive searching.

_inputs:
  search_term:
    type: text
    options:
      pattern: "^[a-z]+$"
      pattern_flags:
        ignore_case: true

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key is deprecated. Use preview_resize instead.

This key toggles whether CloudCannon will show the resize handler to vertically resize the input.

Setting this key to false will hide the resize handler.

By default, this key is true (i.e., the resize handler is shown).

Shows or hides the resize handler to vertically resize the input.

This key defines the initial height of this input in pixels (px).

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

Specifies the time zone that dates are displayed and edited in. Also changes the suffix the date is persisted to the file with. Defaults to the global timezone.

This key defines the earliest date and time, inclusive, that CloudCannon will allow in an Input.

When configured, CloudCannon will prevent you from selecting an earlier date and time.

If the Input already contains an earlier date and time, CloudCannon will require you to change it to a valid value to save your changes, or discard your unsaved changes.

Value must be in ISO8601 format.

The value can have quotation marks or no quotation marks.

If options.end_before is also configured, this key cannot be a later date and time.

This key has no default.

This key is available for Date and Time Inputs.

Examples

In this example, we want our team to enter the date and time of an event in the 2022_event Input. This Input will only allow dates on or after January 1st, 2022.

_inputs:
  2022_event:
    type: datetime
    options:
      start_from: 2022-01-01T00:00:00Z
      end_before: 2023-01-01T00:00:00Z

This key defines a custom error message that explains why a value has failed the validation criteria from options.start_from. This key requires you to define options.start_from.

This key has no default.

This key is available for Date and Time Inputs.

Examples

In this example, we prompt our team to enter a valid date using a custom message.

_inputs:
  2022_event:
    type: datetime
    options:
      start_from: 2022-01-01T00:00:00Z
      start_from_message: Date is too early. Must be during 2022.
      end_before: 2023-01-01T00:00:00Z
      end_before_message: Date is too late. Must be during 2022.

This key defines the date and time, exclusive, that CloudCannon will allow in an Input.

When configured, CloudCannon will prevent you from selecting a later date and time.

If the Input already contains a later date and time, CloudCannon will require you to change it to a valid value to save your changes, or discard your unsaved changes.

Value must be in ISO8601 format.

The value can have quotation marks or no quotation marks.

If options.start_from is also configured, this key cannot be an earlier date and time.

This key has no default.

This key is available for Date and Time Inputs.

Examples

In this example, we want our team to enter the date and time of an event in the 2022_event Input. This Input will only allow dates before January 1st, 2023.

_inputs:
  2022_event:
    type: datetime
    options:
      start_from: 2022-01-01T00:00:00Z
      end_before: 2023-01-01T00:00:00Z

This key defines a custom error message that explains why a value has failed the validation criteria from options.end_before. This key requires you to define options.end_before.

This key has no default.

This key is available for Date and Time Inputs.

Examples

In this example, we prompt our team to enter a valid date using a custom message.

_inputs:
  2022_event:
    type: datetime
    options:
      start_from: 2022-01-01T00:00:00Z
      start_from_message: Date is too early. Must be during 2022.
      end_before: 2023-01-01T00:00:00Z
      end_before_message: Date is too late. Must be during 2022.

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines what format an image is converted to prior to upload.

Examples

In this example, we have configured an Image Input to convert images to WebP format prior to upload.

_inputs:
  hero_image:
    type: image
    options:
      mime_type: image/webp

This key defines how image files are resized prior to upload, using a bounding box defined by width and height options.

Valid values are cover, contain, crop, or stretch:

• cover keeps aspect ratio and ensures the image covers the bounding box
• contain keeps aspect ratio and ensures the image fits inside the bounding box
• crop prompts the user with and interface to select an aspect-ratio-respecting area
• stretch ignores aspect ratio and resizes the image to the bounding box

This key does not apply to existing images, and does not work if width and height options are not defined.

Examples

In this example, we have configured an Image Input to resize images using the cover style to ensure images cover the bounding box while maintaining aspect ratio.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover

This key defines the width of the bounding box used in the resizing method defined by resize_style.

This key defines the height of the bounding box used in the resizing method defined by resize_style.

Examples

In this example, we have configured the height of the bounding box for an Image Input.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover

This key defines whether you can upscale an image to fit the bounding box while resizing an image prior to upload.

Has no effect if files are not resized.

Examples

In this example, we have configured an Image Input to allow upscaling images to fit the bounding box while resizing.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      expandable: true

This key toggles whether CloudCannon will instruct a rich text editor to save width and height attributes on image elements.

Setting this key to true will instruct the rich text editor to save width and height attributes on image elements. This can prevent pop-in as a page loads.

By default, this key is false (i.e., width and height attributes are not saved on image elements). This defaults to true if the Image Size Attributes site flag is enabled (this is enabled for sites created before June 23 2023, in order to keep those sites working).

Examples

In this example, CloudCannon will save width and height attributes on image elements in a Rich Text Input.

_inputs:
  content:
    type: markdown
    options:
      image_size_attributes: true

This key defines which sources and DAMs you are allowed to upload to and browse.

The value can be an array of strings. Valid values include site-files and the reference key for any DAM connected to your site.

If site-files is omitted from the array, site files will not be available as an asset source for this input.

Examples

In this example, we have configured allowed sources for an Image Input.

_inputs:
  image:
    type: image
    options:
      allowed_sources:
        - site-files
        - my-cloudinary-dam

This key toggles whether CloudCannon will skip the image resizing process configured for this input when selecting existing images.

Setting this key to true will skip the image resizing process when selecting existing images.

Examples

In this example, CloudCannon will skip the image resizing process when selecting existing images for an Image Input.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      prevent_resize_existing_files: true

This key defines definitions for creating additional images of different sizes when uploading or selecting existing files.

Examples

In this example, we have configured an Image Input to create additional images of different sizes when uploading or selecting files.

_inputs:
  hero_image:
    type: image
    options:
      sizes:
        - size: 2x
        - size: 3x

This key defines the maximum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too long.

If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any non-negative integer.

If this key is set to 0, CloudCannon requires the Input to be empty.

If options.min_length is also configured, this key cannot be a smaller number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input limits you to a maximum of 125 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_length.

This key requires you to define options.max_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the minimum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too short.

If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any positive integer.

If options.max_length is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input requires a minimum of 25 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.min_length.

This key requires you to define options.min_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the maximum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_words.

This key defines the minimum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_words.

This key defines the maximum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_graphemes.

This key defines the minimum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_graphemes.

This key defines the locale that CloudCannon uses to determine the number of words or graphemes in this Input, if you have max_words, min_words, max_graphemes, or min_graphemes configured.

This key defines a regular expression that the Input value must match.

When configured, CloudCannon will require you to enter a value that matches the REGEX pattern.

If the Input already contains an invalid value, CloudCannon will require you to enter a valid string to save your changes, or discard your unsaved changes.

Value must be a valid REGEX string.

If your REGEX string includes a \ character and CloudCannon Configuration File is a .yml file, use single quotes ' around the string to avoid a build error.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to add an email address to the contact_email Input using the correct email format.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines a custom error message that explains why a value has failed the validation criteria from options.pattern.

This key requires you to define options.pattern.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use the correct email format in the contact_email Input using a pattern message.

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: 'Please use the format ___@___.__'

This key defines the flags (e.g. case-insensitive searching) for the regular expression set in options.pattern.

Examples

In this example, we have configured pattern flags for a text input to enable case-insensitive searching.

_inputs:
  search_term:
    type: text
    options:
      pattern: "^[a-z]+$"
      pattern_flags:
        ignore_case: true

This key toggles whether CloudCannon requires this Input to have a value.

Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.

By default, this key is false (i.e., CloudCannon does not require this Input to have a value).

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we want to require our team to enter an author value for markup files with this Input.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

This key defines a custom error message that explains why a value has failed the validation criteria from options.required.

This key requires you to define options.required.

This key has no default.

This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to use enter an Input value using a required message.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true
      required_message: You are not allowed to leave this blank.

This key defines which file types are available to select or upload to this input.

Accepted format is an array or comma-separated string of MIME types.

The special value "*" means any type is accepted.

Examples

In this example, we have configured a Image Input to accept only JPEG or PNG files.

_inputs:
  featured_image:
    type: image
    options:
      accepts_mime_types:
        - image/jpeg
        - image/png

This key defines the maximum file size in kB that CloudCannon will allow you to upload.

When configured, CloudCannon will prevent you from saving your changes until you select a valid file size, or discard your unsaved changes.

Value can be any positive integer.

This key has no default.

This key is available for File and URL Inputs.

Examples

In this example, we want our team to upload an image using the feature_image Input. This Input limits you to a maximum file size of 750 kB.

_inputs:
  feature_image:
    type: image
    comment: Select the feature image for the banner.
    options:
      max_file_size: 140

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_file_size. This key requires you to define options.max_file_size.

This key has no default.

This key is available for File and URL Inputs.

Examples

In this example, we want our team to upload an image using the feature_image Input. This Input limits you to a maximum file size of 750 kB.

_inputs:
  feature_image:
    type: image
    comment: Select the feature image for the banner.
    options:
      max_file_size: 140
      max_file_size_message: For SEO, keep this under 140kB

This key toggles whether CloudCannon will disable the context menu option and the drop area for uploading files.

Setting this key to true will disable the context menu option and prevent uploading file through drag-and-drop in a File Input.

Examples

In this example, CloudCannon will disable the option to upload a file in the context menu and prevent uploading file through drag-and-drop in a File Input.

_inputs:
  image:
    type: image
    options:
      disable_upload_file: true

This key toggles whether CloudCannon will prevent typing into the Text Input, while still allowing context menu options to change the value.

Setting this key to true will prevent typing into the Text Input.

Examples

In this example, CloudCannon will prevent typing into the Text Input url.

_inputs:
  url:
    type: url
    options:
      disable_direct_input: true

This key toggles whether CloudCannon will prevent file uploads inside the "Select existing file/image" file browser modal window.

Setting this key to true will prevent file uploads inside the file browser modal window.

Examples

In this example, CloudCannon will disable the option to upload files inside the file browser modal window.

_inputs:
  image:
    type: file
    options:
      disable_upload_file_in_file_browser: true

This key defines what format an image is converted to prior to upload.

Examples

In this example, we have configured an Image Input to convert images to WebP format prior to upload.

_inputs:
  hero_image:
    type: image
    options:
      mime_type: image/webp

This key defines how image files are resized prior to upload, using a bounding box defined by width and height options.

Valid values are cover, contain, crop, or stretch:

• cover keeps aspect ratio and ensures the image covers the bounding box
• contain keeps aspect ratio and ensures the image fits inside the bounding box
• crop prompts the user with and interface to select an aspect-ratio-respecting area
• stretch ignores aspect ratio and resizes the image to the bounding box

This key does not apply to existing images, and does not work if width and height options are not defined.

Examples

In this example, we have configured an Image Input to resize images using the cover style to ensure images cover the bounding box while maintaining aspect ratio.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover

This key defines the width of the bounding box used in the resizing method defined by resize_style.

This key defines the height of the bounding box used in the resizing method defined by resize_style.

Examples

In this example, we have configured the height of the bounding box for an Image Input.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover

This key defines whether you can upscale an image to fit the bounding box while resizing an image prior to upload.

Has no effect if files are not resized.

Examples

In this example, we have configured an Image Input to allow upscaling images to fit the bounding box while resizing.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      expandable: true

This key toggles whether CloudCannon will instruct a rich text editor to save width and height attributes on image elements.

Setting this key to true will instruct the rich text editor to save width and height attributes on image elements. This can prevent pop-in as a page loads.

By default, this key is false (i.e., width and height attributes are not saved on image elements). This defaults to true if the Image Size Attributes site flag is enabled (this is enabled for sites created before June 23 2023, in order to keep those sites working).

Examples

In this example, CloudCannon will save width and height attributes on image elements in a Rich Text Input.

_inputs:
  content:
    type: markdown
    options:
      image_size_attributes: true

This key defines which sources and DAMs you are allowed to upload to and browse.

The value can be an array of strings. Valid values include site-files and the reference key for any DAM connected to your site.

If site-files is omitted from the array, site files will not be available as an asset source for this input.

Examples

In this example, we have configured allowed sources for an Image Input.

_inputs:
  image:
    type: image
    options:
      allowed_sources:
        - site-files
        - my-cloudinary-dam

This key toggles whether CloudCannon will skip the image resizing process configured for this input when selecting existing images.

Setting this key to true will skip the image resizing process when selecting existing images.

Examples

In this example, CloudCannon will skip the image resizing process when selecting existing images for an Image Input.

_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
      prevent_resize_existing_files: true

This key defines definitions for creating additional images of different sizes when uploading or selecting existing files.

Examples

In this example, we have configured an Image Input to create additional images of different sizes when uploading or selecting files.

_inputs:
  hero_image:
    type: image
    options:
      sizes:
        - size: 2x
        - size: 3x

This key defines the maximum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too long.

If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any non-negative integer.

If this key is set to 0, CloudCannon requires the Input to be empty.

If options.min_length is also configured, this key cannot be a smaller number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input limits you to a maximum of 125 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.max_length.

This key requires you to define options.max_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the minimum string length, in characters, that CloudCannon will allow in an Input.

When configured, CloudCannon will warn you when an Input value is too short.

If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

Value can be any positive integer.

If options.max_length is also configured, this key cannot be a greater number.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

To use this key in a Select Input, allow_create must be set to true.

Examples

In this example, we want our team to enter a blog description using the Rich Text seo_description Input. This Input requires a minimum of 25 characters.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

This key defines a custom error message that explains why a value has failed the validation criteria from options.min_length.

This key requires you to define options.min_length.

This key has no default.

This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.

Examples

In this example, we prompt our team to enter a valid number of characters using a custom message.

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      max_length_message: You are only allowed 125 characters.
      min_length: 25
      min_length_message: Please write more than 25 characters.

This key defines the maximum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_words.

This key defines the minimum string length, in words, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_words.

This key defines the maximum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which maximum string length an Input will accept. This key requires you to define `options.max_graphemes.

This key defines the minimum string length, in graphemes, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.

This key defines the message that explains which minimum string length an Input will accept. This key requires you to define options.min_graphemes.

This key defines the locale that CloudCannon uses to determine the number of words or graphemes in this Input, if you have max_words, min_words, max_graphemes, or min_graphemes configured.