#  Media Gallery 

 



 ##  

  expand\_more  

 
  

 

## How to add a Media Gallery component

The Media Gallery components allows you to add images (JPG and PNG files only) to your site and display them as an image gallery grid. Site visitors can click on the individual images to see a larger version of the image.

   ![A screenshot of a media gallery displaying planets, with headings and captions.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2025-12/Screenshot%202025-12-16%20at%205.15.25%E2%80%AFPM.png?itok=SiJlslCJ) 

 

An example of a Media Gallery component displaying images, titles, and captions.### Step 1: Add and configure a new Media Gallery component

1. Add a **Media Gallery** component (see [Adding a component](https://drupal.harvardsites.harvard.edu/adding-component) for instructions on how to add a component).
2. On the Content tab, click on **Choose component** under **Media** to add an image to your gallery.
    1. **Title** (optional): Add a title for the image you’re adding.
    2. **Media caption** (optional): Add a caption for the image or media you’re adding.
    3. Click the **Add image** button to add your image. You can select an image from the media library or upload a new image (see [Media Library](https://drupal.harvardsites.harvard.edu/resource/media-library) for details about working with the media library).
    4. Click on **Save** to save the image to the gallery.
    5. Repeat these steps to add additional images to your gallery.
3. Click on the **Section Heading** section of the component to add an optional heading and introductory paragraph that appears at the top of the Media Gallery component (see Adding a component heading for details about adding a section heading).
4. Click on the **Block Settings** to configure the display of the Media Gallery.
    1. **Field Display**: Allows you to show or hide the **Title** and **Caption** of the images on the media gallery component.
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 Media Gallery component.



 

##  Learn more about the Media Gallery component 

 



 ### Examples

Demo Site

See an example of the Media Gallery component on the [Planetary Gallery](https://drupaldemo.harvardsites.harvard.edu/planetary-gallery) page 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.



 

   ![](/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)
- [ New Features ](/content-structure/new-features)
- [ Components ](/topics/components)
- [ Images ](/general-site-management/images)