Mai Galleries
Mai Galleries allows you to easily create responsive image galleries with optional image lightbox.
How To Use
- Create or edit the page or post that you'd like to use Mai Gallery.
- Add Mai Gallery block to the page.
- Click the gallery in the editor to select it, then click "Add to gallery" in the block sidebar settings.
- Select or upload your gallery images.
- Configure your gallery display and layout settings, save/update, and view your page.
Mai Gallery Block Settings
Images
Image Orientation
Mai Theme takes the guesswork out of which image size to use. Instead, we you can focus on what really matters, the image orientation (aspect ratio). Depending on the active theme, you can choose from Landscape, Portrait, Square, or Custom. Custom let’s you explicitly declare the registered image size to display.
Images
Select or upload as many images as you'd like in your gallery.
Add image shadow
Adds an image shadow that matches your theme styles.
Enable image lightbox
Loads a larger image in an overlay when clicking on a thumbnail.
Layout
Columns
Choose the number of columns you want to display. Optionally align your columns vertically and horizontally. Use CLEAR to revert back to the default.
Custom Responsive Columns
By default, Mai Theme will automatically scale down the amount of columns on tablets and mobile based on the main Columns (desktop) setting. Using the custom responsive columns setting gives you full control over how many columns display at different “breakpoints” or screen sizes.
Align Columns
Align the column containers themselves. This does not affect the content inside each column. This is only relevant when you don’t have enough entries to fill up the last row. If you have 3 columns, but only 8 entries, the last 2 will align left, center, or right, depending on this setting.
Align Columns (vertical)
Vertical alignment for the entries. This is most noticeable when displaying entries with a different amount of content in them. Most of the time, this setting won’t be needed.
Column & Row Gap
The amount of space you want between your columns and rows.
Top & Bottom Margin
The amount of spacing you want above or below your gallery.
Screenshots