Using the Gallery Thumbnails Widget in Hipposerve® Studio
The Gallery Thumbnails widget allows you to display collections of images as a gallery of thumbnails. Visitors can browse images quickly, view captions and descriptions, and open larger versions when required.
Thumbnail galleries are ideal for portfolios, product showcases, photo collections, team galleries and project displays.
Adding a Thumbnail Gallery
To add a Gallery Thumbnails widget to your website:
- Drag and drop the Gallery widget from the main toolbar.
- Select the Thumbnails 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 each image within your gallery.
To edit gallery images:
- Select the gallery.
- Click the pictures icon () in the right-hand toolbar.
- Add or edit the image title, link, address and description.
Gallery Display Options
Disable Image Enlargement
Enable the option to prevent images from automatically enlarging when visitors click on them.
Background Settings
Select the gallery and click the background settings icon in the right-hand toolbar to customise the background colour and opacity.
Image Filling
Choose how images fit within their thumbnail containers:
- Fit: Displays the entire image within the available space.
- Fill: Expands the image to fill the available area completely.
Thumbnail Settings
You can customise the appearance of the thumbnails themselves.
- Adjust thumbnail width and height
- Set spacing (padding) between thumbnails
- Choose thumbnail alignment
- Configure animation effects
- Set different styles for normal and hover states
Captions and Descriptions
The Gallery Thumbnails 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 to each image in the Gallery Media Manager.
- Click Apply.
- Open the Caption section in the right-hand toolbar.
- Enable Include Description.
Lightbox Settings
When visitors open an image, the gallery can display it inside a lightbox overlay.
You can customise the lightbox appearance, including the background colour shown behind the enlarged image.
Preview Example
The thumbnail gallery displays images in a compact grid, allowing visitors to browse multiple images while maintaining a clean and organised page layout.
