#  Media Gallery Component added to HarvardSites Drupal 

 





Showcase visual stories in a clean, accessible grid that invites site visitors to explore.



 

January 13, 2026

 

 

## What it is

The [Media Gallery](/media-gallery "Media Gallery") is a component that displays a curated set of media items in a tidy grid. The Media Gallery component focuses on images (JPG or PNG) and opens a larger view when a site visitor clicks on a thumbnail.

Use Media Gallery when you want to:

- **Tell a visual story** — e.g., an event recap, fieldwork photos, or a lab build‑out.
- **Showcase a collection** — artwork, archival images, or student projects.
- **Highlight a place** — campus spaces, facilities, or galleries from a site tour.
- **Support a longform story** — add a gallery mid‑article to show related images without interrupting the narrative.
- **Group related graphics** — process diagrams, slides from a talk, or series posters presented together.

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

 

An example of a media gallery displaying images with their captions.## Best practices

Follow these tips to keep galleries useful, fast, and accessible:

- **Write meaningful alt text.** Every image needs concise, [purposeful alternative text](/resource/when-add-alt-text "When to add alt text") so screen‑reader users can understand the content. If an image is decorative, mark it as such.
- **Use captions and credits consistently.** Captions add context; credits acknowledge creators and sources. Keep patterns consistent across the site.
- **Optimize image size and format.** Export images at appropriate dimensions and compression to keep pages quick. Use JPG for photographs and PNG for simple graphics or transparency. See the [Image sizes](/resource/image-sizes-old "Image Sizes") and [Media Library ](/resource/media-library "Media Library")guidance in the User Guide.
- **Aim for a consistent aspect ratio.** Similar orientations help the grid feel orderly and avoid jarring jumps in height.
- **Consider galleries over inline images in long text.** Galleries keep related images together and easier to navigate than scattering many inline images.
- **Name media clearly in the Media Library.** Descriptive titles (e.g., “Widener‑stacks‑north‑reading‑room.jpg”) make future reuse easier.
- **Keep sets focused.** Large, unfocused galleries can be overwhelming. Curate to the strongest images and split very large sets across pages or sections.
- **Support downloads the right way.** If you offer a brochure or handout near a gallery, link to a **Resource** content item (evergreen URL) rather than directly to a file. This keeps external links working when files are updated. (See [Linking to a file in HarvardSites](/linking-file "Linking to a file") in the User Guide.)

**Accessibility note:** Avoid images that are primarily text. If text in an image is essential, ensure that information is provided in adjacent page content as well.



 

 

 



 

 See also:- [ New Features ](/content-structure/new-features)