Using the Gallery Masonry Widget in Hipposerve® Studio
The Gallery Masonry widget displays images in a dynamic masonry-style layout where items are automatically arranged to make the best use of available space. This creates a modern, Pinterest-style gallery that is ideal for portfolios, photography websites, product showcases and creative projects.
Masonry galleries are particularly effective when displaying images of different sizes and proportions, creating a visually engaging and professional presentation.
Adding a Masonry Gallery
To add a Gallery Masonry widget to your website:
- Drag and drop the Gallery widget from the main toolbar.
- Select the Masonry Gallery layout.
- Select the gallery and click the picture editing icon (
) in the right-hand toolbar. - Click Add Pictures to upload your images.
- Click Size in the right-hand toolbar.
- Set a gallery size manually or enable Allow to adjust size automatically.
Managing Gallery Images
You can add additional information to every image within the gallery.
To edit gallery images:
- Select the gallery.
- Click the pictures icon () in the right-hand toolbar.
- Add or edit image titles, links, addresses and descriptions.
Display Options
Disable Image Enlargement
Enable this option if you do not want images to enlarge when visitors click on them.
Background Settings
Select the gallery and click the background settings icon in the right-hand toolbar to customise the gallery background colour and opacity.
Image Filling
Choose how images fit within their display areas:
- Fit: Displays the entire image within the available space.
- Fill: Expands the image to completely fill the available area.
Thumbnail Borders
You can customise the appearance of thumbnail borders within the gallery.
Click the thumbnail border settings to configure:
- Border width
- Border colour
- Border style
These settings can help create a more distinctive gallery appearance.
Slideshow Settings
The Gallery Masonry widget can automatically cycle through gallery content.
You can configure:
- Picture change frequency
- Transition duration
- Animation timing
Captions and Descriptions
The Gallery Masonry widget supports image captions and descriptions.
You can customise:
- Caption visibility
- Caption background colour
- Text styling and formatting
To include image descriptions:
- Add a description for each image inside the Gallery Media Manager.
- Click Apply.
- Open the Caption section in the right-hand toolbar.
- Enable Include Description.
Lightbox Settings
When visitors click on an image, it can be displayed inside a lightbox overlay.
You can customise the background colour displayed behind enlarged images when viewing them.
Preview Example
The Gallery Masonry layout automatically arranges images into an attractive grid, creating a modern and visually engaging gallery that makes efficient use of available space.
