Image Collage

How to add an Image collage

Step 1: Add and configure Image collage component

1. Add an Images component (see Adding a component for instructions on how to add a component).
2. Configure the Images component layout by selecting an option from the Choose a layout section. You can include up to three images by selecting one of the following layout options:
   1. Choose Two Image — Equal to provide two side-by-side images.
   2. Choose Three Image – Equal to provide three side-by-side images.
   3. Choose Two Image — Large Left to provide a large image on the left and a smaller image on the right.
   4. Choose Two Image — Large Right to provide a smaller image on the left and a large image on the right.
   5. Choose Three Image — Large Left to provide a large image on the left and two smaller stacked images on the right.
   6. Choose Three Image — Large Right to provide two smaller stacked images on the left and a large image on the right.

3. Click on the Settings section to configure block settings.
   1. For Two Image — Equal, and Three Image layouts, select an aspect ratio for the images from the Aspect Ratio menu (see Image Sizes for details about different image ratios).
   2. Add an optional Page Anchor Link to allow for links to the Video component (see instructions under Linking to page content).
4. Click on the Section Heading section to add an optional section that appears at the top of the Image component (see Adding a section heading for details about adding a section heading).
5. Click on the Color Settings section to configure color settings.
   1. Select a color scheme from the Component Color Scheme menu and review the Component Color Scheme Preview to see the effect of changing the color settings.
6. Choose Save to save the Images component.

Step 2: Add an Image item

1. Select the Add image button from the Images component preview on the edit screen.
2. Add an image to the component by selecting the Add image button. You can select an image from the media library or upload a new image (see Media Library for details about working with the media library).
3. Provide an optional Caption to display below the image.
4. If needed, provide an image description in the Alt Override field. This is only necessary if the alternative text supplied with the image in the media library is not suited to the context. Select the Mark Image as Decorative checkbox if the image is decorative rather than informative (see When to add alt text for best practices for providing alternative text).
5. Choose Save to save the Image item.

Step 3: Save Images component

1. Preview the Image item in the Images component preview on the edit screen. You can add more Image items by clicking the plus sign next to the first Image item. Don’t add more images than specified in the component layout settings. Additional images will not display correctly.
2. Once you have finished adding Image items, choose the Save button on the edit screen.

What is an Image collage component?

An Image collage component is a content block with images and captions arranged in a grid.

Image collages components are often used to highlight informative and visually compelling content.

An Image collage component is composed of images arranged in different layouts, with optional captions.