Media Gallery Component added to HarvardSites Drupal

What it is

The 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.

Best practices

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

• Write meaningful alt text. Every image needs concise, purposeful alternative 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 and 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 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.