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

Developer ReferenceConfiguration File

resize_style

Table of contents

Description:

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.

Appears in:
├── _inputs
│   └── *
│       ├── Rich Text Input
│       │   └── options
│       │       └── resize_style
│       ├── File Input
│       │   └── options
│       │       └── resize_style
│       └── URL Input
│           └── options
│               └── resize_style
└── _editables
    ├── content
    │   └── resize_style
    ├── block
    │   └── resize_style
    └── image
        └── resize_style
Type:
string
Default value:
contain
Allowed values:
cover
contain
stretch
crop
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.

Copied to clipboard
_inputs:
  hero_image:
    type: image
    options:
      width: 1200
      height: 600
      resize_style: cover
{
  "_inputs": {
    "hero_image": {
      "type": "image",
      "options": {
        "width": 1200,
        "height": 600,
        "resize_style": "cover"
      }
    }
  }
}
Open in a new tab