Developer ReferenceConfiguration File

fit

On this page

Description:

This key defines how images fit within their containers in the gallery section of a Card. Setting this key to padded adds padding around images to maintain aspect ratio, contain ensures images fit entirely within the container by setting the largest dimension of the image to the largest dimension of the container while maintaining aspect ratio, cover ensures images cover the entire container while maintaining aspect ratio with the center of the image aligned with the center of the container, and cover-top ensures images cover the entire container while maintaining aspect ratio with the top of the image aligned with the top of the container.

Appears in:
└── gallery
    └── fit
Type:
string
Default value:
padded
Allowed values:
padded
cover
contain
cover-top
Examples:

In this example, we have configured the gallery fit to use cover so images cover the entire container while maintaining aspect ratio, aligning the center of the image with the center of the container.

Copied to clipboard
collections_config:
  blog:
    preview:
      gallery:
        image:
          - key: featured_image
        fit: cover
{
  "collections_config": {
    "blog": {
      "preview": {
        "gallery": {
          "image": [
            {
              "key": "featured_image"
            }
          ],
          "fit": "cover"
        }
      }
    }
  }
}
Open in a new tab