Image Grid
Advanced Training Module 2: Advanced Design Blocks
The Image Grid block allows you to display multiple images in a visually engaging layout. Unlike a standard Gallery block, which focuses on presenting a collection of images, the Image Grid block is designed to create a more intentional visual design and draw attention to featured content.
Image Grids work particularly well when you want to showcase a small number of high-quality images that support a specific message or theme.
Common uses include:
- Student life highlights
- Campus photography
- Research and lab spaces
- Event photo collections
- Program highlights
- Department showcases
When to Use an Image Grid
Use an Image Grid when a collection of images tells a story or reinforces a message. An Image Grid is often more visually impactful than displaying several separate Image blocks.
Examples include:
Student Experience
Showcase classroom, campus, and extracurricular experiences.
Research Highlights
Feature laboratories, equipment, fieldwork, or research projects.
Facilities and Spaces
Display classrooms, study areas, or department facilities.
Events and Activities
Highlight photography from recent events or community engagement activities.
Adding an Image Grid
To add an Image Grid:
- Click the + button and search for Image Grid.
- Select the Image Grid block.
- Select an image area within the grid.
- Choose Select Image.
- Upload an image or choose one from the Media Library.
- Repeat until all desired images have been added.
Recommended minimum image width: 768 pixels
Using higher-quality images generally produces better results.
Managing Individual Images
Each image in the grid can be customized independently.
Common options may include:
Enlarge on Click
- Allow visitors to open a larger version of the image.
- This can be useful when images contain details that may be difficult to see in the grid layout.
Image Position
- Adjust the image position to determine which portion of the photo is most visible.
- This is particularly useful when important content is near the edges of the image.
Replace or Remove Images
- Update images without rebuilding the entire grid.
- This makes it easy to refresh content while maintaining the layout.
Managing the Grid Layout
Once multiple images have been added, you can customize the overall appearance of the grid.
Block Title
Add a heading above the Image Grid.
Number of Columns
Choose how many images appear in each row.
Common options include:
- 2 columns
- 3 columns
- 4 columns
More columns allow more images to appear simultaneously, while fewer columns create larger image displays.
Background Colour
Most Image Grids support:
- White background
- Grey background
Use background colours thoughtfully to help distinguish sections of a page.
Block Width
Depending on your layout, width options may include:
- Default
- Large
- Maximum Width
Wider layouts can create greater visual impact, especially on homepage and landing page designs.
Grid Spacing
Adjust the spacing between images.
Smaller gaps create a more compact appearance, while larger gaps give images more breathing room.
Image Aspect Ratio
Choose how images should be cropped and displayed.
Common options include:
Landscape
Best for:
- Campus photography
- Group photos
- Event images
Portrait
Best for:
- People photos
- Staff profiles
- Vertical imagery
Square
Best for:
- Balanced visual layouts
- Mixed image collections
Using a consistent aspect ratio helps create a cleaner and more professional appearance.
Reordering Images
The order of images can significantly affect how visitors experience the content.
To reorder images:
- Select an image.
- Use the move controls.
- Arrange images in the desired sequence.
Consider placing the strongest or most important image first.
Best Practices
Use High-Quality Images
Image Grids rely heavily on visual impact. Choose clear, professional images whenever possible.
Maintain a Consistent Style
Images that share similar colours, lighting, and composition often produce stronger layouts.
Focus on a Single Theme
The images in a grid should support a common message or topic.
Avoid Overcrowding
Just because the block can hold many images doesn’t mean it should. A smaller number of strong images often creates a more effective presentation.
Consider Mobile Devices
Preview the grid on different screen sizes to ensure the layout remains effective.
Image Grid vs Gallery
Use an Image Grid When:
- Visual design is the primary goal.
- You are highlighting a small collection of important images.
- Images support a specific message or story.
Use a Gallery When:
- You want to display a large collection of images.
- Browsing photographs is the primary goal.
- Image quantity is more important than layout.
-
Welcome to this tutorial on mastering the Image Grid Block! In this video, we’ll guide you through creating a visually appealing image grid, which is perfect for showcasing three to five images.
Let’s get started with a step-by-step guide:
Add the Image Grid using the Block Menu.
Next, you can add images by selecting a single item and then clicking on “Select Image” over here on the right.
Note: The minimum recommended image size is 768 pixels wide.Once you’ve added an image, you can customize it:
- Click on the single item and use the block options on the right.
- You can change the relative position by moving the adjustment wheel.
- Enlarge the image or replace it by clicking the “Replace” button and choosing a different image.
- If needed, you can remove the image altogether.
To add another image, click on another single item, select an image, and choose one from the media library.
After adding several images, you can:
- Change their order using the arrow in the contextual menu to shift images from side to side.
- Select the entire block by clicking on the image at the top left of the contextual menu.
Now, let’s explore the display options for the entire block:
- Add a header: You can give the block a title or description.
- Change the background color: Choose gray, white, or another option.
- Control the number of columns: For example, here we have four columns. To add a fourth image, click on the blue plus sign at the bottom, then select an image from the media library.
- Adjust the width: Options include default, large, or max width.
- Customize spacing: Change the size, padding, or gap between images.
- Choose the aspect ratio: Options include portrait, square, or the default landscape.
There are many other configurations available. Explore the Block Library to discover additional ways to customize your Image Grid.
Try it Out
- Add an Image Grid to a page.
- Add three to five images.
- Experiment with different column layouts.
- Change the image aspect ratio.
- Rearrange the images.
- Preview the page and review the visual impact of the layout.