☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

sizes

Table of contents

Description:

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

Appears in:
├── _inputs
│   └── *
│       ├── Rich Text Input
│       │   └── options
│       │       └── sizes
│       ├── File Input
│       │   └── options
│       │       └── sizes
│       └── URL Input
│           └── options
│               └── sizes
└── _editables
    ├── content
    │   └── sizes
    ├── block
    │   └── sizes
    └── image
        └── sizes
Type:
Array<sizes[*]>
Items:
[*]Object#

This key represents an individual size definition in the options.sizes array for Image Inputs.

The value is an object that can contain size and target properties.

Show examplesHide examples

In this example, we have configured a size definition for an Image Input.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      sizes:
        - size: 2x
          target: hero_image_2x
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "sizes": [
          {
            "size": "2x",
            "target": "hero_image_2x"
          }
        ]
      }
    }
  }
}
Examples:

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

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      sizes:
        - size: 2x
        - size: 3x
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "sizes": [
          {
            "size": "2x"
          },
          {
            "size": "3x"
          }
        ]
      }
    }
  }
}
Open in a new tab