Developer ReferenceConfiguration File

resize_style

On this page

Description:

This key defines how image files are resized prior to upload, using a bounding box defined by width and height options (these optionas are required). This key applies to existing images unless prevent_resize_existing_files is set. Setting this key to 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 an interface to select an aspect-ratio-respecting area, and stretch ignores aspect ratio and resizes the image to the bounding box.

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