Gallery Block
Intermediate Training Module 2: Common Content Blocks
The Gallery block allows you to display multiple images together in a clean, organized layout. Rather than inserting individual images one at a time, a gallery groups related images into a single visual collection.
Galleries are ideal for showcasing:
- Events and activities
- Facilities and spaces
- Research projects
- Student experiences
- Campus photography
- Project portfolios
A well-designed gallery can help tell a story, highlight accomplishments, and make pages more engaging.
When to Use a Gallery
Use a Gallery block when you want to display several related images together.
Examples include:
- Event Photos: Showcase images from a conference, workshop, open house, or community event.
- Spaces and Facilities: Highlight classrooms, labs, meeting rooms, or campus facilities.
- Student and Faculty Activities: Display research, teaching, student life, or community engagement.
- Before-and-After Examples: Present visual comparisons in an easy-to-follow format.
When multiple images support the same topic, a gallery is often more effective than several standalone image blocks.
Adding a Gallery
To add a Gallery block:
- Click the + button and search for Gallery.
- Select the Gallery block.
- Upload new images or choose images from the Media Library.
- Select multiple images.
- Click Create Gallery.
- Click Insert Gallery.
Your images will automatically be displayed in a grid layout.
Gallery Layout Options
Several settings can be used to customize how images are displayed.
Number of Columns
Control how many images appear in each row.
For example:
- 2 columns
- 3 columns
- 4 columns
The ideal number depends on:
- The number of images
- The available page width
- How much detail appears in each image
Image Size
Choose the image resolution displayed within the gallery.
Larger image sizes provide more detail but may take up more space on the page.
Cropping Images
Cropping helps create a consistent visual appearance by making images display at the same proportions.
This can be particularly helpful when images have different dimensions.
Linking Images
Depending on your site’s configuration, images can link to:
- The image file
- An attachment page
- Another destination
Randomizing Images
Some gallery configurations allow images to appear in a random order each time the page loads.
Reordering Images
Images can be rearranged within the gallery.
To change the order:
- Select an image within the gallery.
- Use the move controls to reposition it.
- Continue until the gallery is arranged as desired.
The order of images can influence how visitors experience the content, so it is worth reviewing carefully.
Accessibility and Image Quality
As with all images on your website:
- Use high-quality photographs.
- Add meaningful alt text where appropriate.
- Avoid images that contain important text.
- Ensure images remain clear on mobile devices.
Well-prepared images improve both usability and accessibility.
Best Practices
Use Related Images
Images within a gallery should support a common topic or theme.
Choose Quality Over Quantity
A small collection of strong images is often more effective than a large collection of average ones.
Consider Image Order
Place the strongest or most important images first.
Maintain Consistency
Where possible, use images with similar quality, orientation, and style.
Preview on Mobile Devices
Always review galleries on smaller screens to ensure they remain easy to browse.
Common Uses
Galleries work well for:
- Event photo collections
- Campus tours
- Research showcases
- Student projects
- Department highlights
- Facility overviews
They are one of the most effective ways to present visual content without overwhelming visitors.
-
The gallery block is a way to display multiple photos in a grid, this makes it optimal for you to show your collection of images in an organized way.
To add a gallery block to your page, navigate to the block menu and add the gallery block.
Images can be added by using your media library or uploading new photos from your computer. Then click create a new gallery, then insert gallery.
You can organize your images by using the arrows on the menu that appears above the block.
To customize how your gallery looks, navigate to the block tab and from there you can change the number of columns, resolution of your images, if you want to make the images link to its media files, crop images or randomize the placement order of the images.
Try it Out
Practice working with the Gallery block.
- Add a Gallery block to a page.
- Select several images from your Media Library.
- Create and insert the gallery.
- Change the number of columns.
- Rearrange the order of the images.
- Preview the page and review the gallery on desktop and mobile devices.