Images Component

The images component allows you upload any number of images. Supported image file formats are JPG/JPEG, PNG, WebP, TIFF, AVIF, and SVG.

Images are stored and transcoded automatically, converted to responsive sizes that are available directly on a global content delivery network (CDN). This is ideal for using responsive images with srcset.

• Automatically transcodes images to multiple sizes
• Generates WebP variants automatically
• Multiple images can be arranged as you wish

When adding this component to a shape or piece, specify a name (required) and description (optional) indicative of the sort of content you wish for it to contain. This description will be visible to those who build content based off of this shape. You can also optionally set minimum and/or maximum limits on the number of images that may be added to this component.

This component is not translatable, meaning that the same images/metadata will be stored for all translations. Refer to our languages page for more information.

As an editorial user, you can add images to this component in multiple ways:

• Drag and drop images from your machine onto the component.
• Click the Drag and drop images prompt to browse your file system for images.
• Magic Paste images from elsewhere in your tenant.
• Drag and drop images from the Assets panel of the catalogue's organizer sidebar.

Once added, you can click and drag on image thumbnails to reorder them as desired. When you hover over an image thumbnail, you’ll see several options. The icon in the bottom-left corner allows you to add the image to the Magic Paste lightbox. The action button (...) in the top-right corner opens a menu of options: Edit lets you input metadata like alt text and caption, Image detail shows you the image's full details within the Asset Organizer, and Delete removes the image from the component.

Once created, images components and their content are accessible via the Catalogue API. Refer to our sample query for retrieving images component content, and to the API docs at https://api.crystallize.com/your-tenant-identifier/catalogue for more information.