# Image Collage ## expand\_more ## How to add an Image collage ### Step 1: Add and configure Image collage component 1. Add an Images component (see [Adding a component](/adding-component "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. ![Select a layout from the available options. You can include up to three images in an Images component, arranged in different layouts.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2026-05/Screenshot%202026-05-08%20at%2011.04.06%E2%80%AFAM.png?itok=R1D_6lsx) Select a layout from the available options. You can include up to three images in an Images component, arranged in different layouts.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](/resource/image-sizes-old "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](/linking-page-anchor-links "Linking to on-page anchor links")). 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](/adding-section-heading "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](/resource/media-library "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](/resource/when-add-alt-text "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. ![Screenshot of Images component with a large image on the left and smaller image on the right, with callout numbers marking the images and captions.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-09/annotation_images.png?itok=3o669JfG) An Images component is composed of up to three images **(1)** with captions **(2)**, arranged in different layouts. This example uses the **Two Image — Large Left** layout (see the [example Images component](https://drupaldemo.harvardsites.harvard.edu/research#example-images) on the Drupal Demo Site). --- ## Learn more about the Images component ### Examples Demo Site See an example of the Images component on the [Research landing page](https://drupaldemo.harvardsites.harvard.edu/research#example-images) of the Department of Rocket Science demo site. ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) ### Accessibility Digital Accessibility Website Review guidance on [using images and media to enhance understanding](https://accessibility.huit.harvard.edu/use-images-and-media-enhance-understanding) and learn how to [write helpful alt text to describe images](https://accessibility.huit.harvard.edu/describe-content-images) from the Harvard Digital Accessibility website. ![Icons for touch, sight, accessibility, cognition, and hearing](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) See also:- [ Components ](/site-section/components) - [ How-tos ](/content-structure/how-tos)