Video
You can add a gallery in the Gutenberg and you can choose between the default WordPress gallery or if you have purchased the Premium plugin, you can also choose to use the Minimalio Gallery.
Options for Minimalio Gallery
Grid, Masonry and Horizontal Masonry
Choose if you want to use the masonry layout, grid or the horizontal Masonry layout.
Number of columns
Choose how many images are in one row, so how many columns does the gallery have. You can also set it up differently for different views, so for table and mobile.
Gutter – the gap between images
Choose how big is the gap between the images, you can also set it up differently for different views.
Captions
Add captions to the gallery and adjust their size and alignment.
Image hover
Choose what happens, when the user hovers (mouse over) your images. There are 4 options – Zoom in, Zoom out, Greyscale to color and Color to greyscale.
Lightbox
All the images are automatically opened in lightbox, when clicked.
You can adjust the lightbox in Theme Settings -> Minimalio options -> Lightbox.
The options of Lightbox are:
- Background and Icons color
- Icons style
- Captions background, color and font size
- Hide arrows on mobile
- Hide image counter
Transcription of the video
Before diving into galleries and lightbox settings, I highly recommend checking out our article on image optimization at the Minimalio blog. Uploading oversized images is one of the main causes of slow website performance, so proper optimization is essential.
Understanding Gallery Options in Gutenberg
When editing a page in the Gutenberg editor, you’ll notice that WordPress includes a default gallery block. However, this native gallery has limited functionality—you can only change the number of columns and nothing else.
That’s why Minimalio includes an enhanced gallery block with significantly more options and flexibility.
Adding a Minimalio Gallery
To get started, search for the Minimalio Gallery block and add it to your content. Once added, you’ll need to populate it with images by either uploading new files or selecting existing images from your media library.
Image Settings
Each image in your gallery has two important fields:
Alternative Text (Alt Text): This describes the image content for screen readers, making your site accessible to visually impaired users. Alt text also helps with SEO, as Google uses it to understand your images.
Caption: This optional text can be displayed either in the gallery itself or in the lightbox when images are opened.
After adding your alt text and captions, click Create New Gallery. On the next screen, you can reorder images by dragging them and edit captions as needed. When you’re satisfied, click Insert Gallery.
To add or remove images later, simply click the pencil icon on the gallery block.
Important Note: The gallery preview in the editor is only a rough representation. The actual appearance on your site will differ based on your chosen settings.
Gallery Style Options
The Minimalio Gallery offers three distinct layout styles, all customizable from the side panel:
1. Masonry
Images are arranged in columns while maintaining their original aspect ratios. You can customize:
- Number of columns for desktop, tablet, and mobile
- Gap size (gutter) between images for each screen size
2. Grid
Images are automatically cropped to a uniform aspect ratio you specify. You can adjust:
- Columns for different screen sizes
- Gap size between images
3. Horizontal Masonry
Images are arranged in rows with a consistent height. This style offers:
- Adjustable maximum row height (default: 250 pixels, customizable to any value)
- Gap size control (column count is automatic)
Caption Customization
Enable captions with a simple toggle, then customize:
- Font size
- Text alignment (left, center, or right)
Hover Effects
Add visual interest with hover effects when users move their mouse over gallery images. Choose from:
- Two zoom options
- Two grayscale options
Lightbox Settings
When visitors click gallery images, they open in a lightbox overlay. To customize the lightbox experience, navigate to Theme Settings > Minimalio Options > Lightbox.
Available Lightbox Options
Background: Choose any color and adjust the opacity to your preference.
Icons: Customize the icon color and select from three icon styles—default, simple, or alternative.
Captions: Toggle caption display in the lightbox and customize the background color, text color, and font size.
Navigation Arrows: On mobile devices, arrows appear at the bottom of the screen. You can hide them entirely since mobile users can swipe to navigate between images.
Image Counter: Display or hide the image counter that shows the current position in the gallery.