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

Developer ReferenceConfiguration File

fit

Table of contents

Description:

This key defines how images fit within their containers in the gallery section of a Card.

Valid values are padded (default), contain, cover, or cover-top.

  • The padded value adds padding around images to maintain aspect ratio.
  • The contain value 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.
  • The cover value ensures images cover the entire container while maintaining aspect ratio, aligning the center of the image with the center of the container.
  • The cover-top value ensures images cover the entire container while maintaining aspect ratio, aligning the top of the image with the top of the container.

This key defaults to contain.

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