Mai Galleries

Mai Galleries allows you to easily create responsive image galleries with optional image lightbox.

How To Use

1. Create or edit the page or post that you'd like to use Mai Gallery.
2. Add Mai Gallery block to the page.
3. Click the gallery in the editor to select it, then click "Add to gallery" in the block sidebar settings.
4. Select or upload your gallery images.
5. 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