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, you can specify the following:

• Name (required) - A name for the component.
• Identifier - String that will be generated based on the component name when shape/piece is created or updated. You’ll use the identifier to reference the component programmatically.
• Description - An optional description of what the component should contain. This will be visible to anyone who adds content to the component later.
• Localized Content - If Yes, then you can store different images for each language set up within your tenant. If No, then the same image(s) will be shared across all languages.
• Min/Max - Optionally set minimum and/or maximum limits on the number of images that may be added to this component.

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.