Create a Beautiful Justified Gallery with the Block Editor

Resolution

Choose between Thumbnail, Medium, Large, or Full image sizes to balance sharpness and page load speed.

Row Height

The Row Height slider lets you set your desired target row height (e.g., 250px). The block will automatically scale images to fill the available space evenly, maintaining proper spacing.

Remove Image Gap

Toggle gaps on or off between images. A no-gap layout gives a clean, magazine-style look, while small gaps help separate each image.

Randomize Image Order

Enable this option to shuffle image order on each page load — ideal for giving repeat visitors a fresh gallery experience.

Selecting WooCommerce Product from the Image Click Behavior dropdown will allow you to link the gallery images to WooCommerce products in your WordPress website. Linking is done on the individual Image blocks from a search field that is added to their Settings panel.

Note: Option will only be available when the WooCommerce plugin is installed and active. Images that are not linked will not have an empty hyperlink added.

The Default Product Link Behavior dropdown allows to decide if you want the link to add a product to your shopping cart or if you want the link to go to the selected product’s page.

The Link Target dropdown allows to decide if you want the link to be placed on an icon or on the thumbnail image. The Display Add To Cart Icon drop down allows you select if the Link icon is always visible or only visible on hover.

Note: With WooCommerce Product selected an additional control is added into the gallery block’s Styles panel. This control allows you to set the color of the Add To Cart icon as well as its background color.

Finally the Enable Lightbox control allows you to toggle the Lightbox on and off. This is only available when the Link Target dropdown set to Link Target Icon. With Enable Lightbox activated a further control allows you set what displays in the Lightbox alongside the image. With Image Title, Caption, EXIF Data, and WooProduct details being options.

From the Gallery Hover Settings panel you can set if images will display an overlay when you hover over them. The Hover Style dropdown allows you to select from a Blur, Fade, Gradient, Chip, or Color Overlay.

Notes: With the Color Overlay selected you can additionally customize the color of the text and background of the Overlay by going to the Styles panel and the Gallery Hover Styles section.

The Overlay Content drop down allows you to select what displays inside the overlay when you hover above an image. You can select from Show Image Title, Show Image Caption, Show EXIF Data, or Show Product Info.

Notes: Show Product Info option is only available when gallery is linked to WooCommerce.

Enable Image Filtering

When filtering is enabled, you can assign categories to images (e.g., “Sports,” “Portraits,” “Events”) and allow visitors to toggle between them.

First you have the Filter Bar Alignment settings which allows you set the alignment of the bar with your added categories (e.g., “All, Sports, Portraits, Events”).

Then you have the Filter Categories input. Here you can add your filter categories (e.g. “Portraits, Events, Landscape”) separated by commas.

Disable Right-Click on Page

Prevents right-click actions to discourage casual saving or copying of images.

Note: This feature makes it harder for visitors to download your work but cannot fully prevent access via browser developer tools or source code.

Enable Lazy-Load of Images

Load images as the viewer scrolls for improved initial load performance, especially in large galleries.

Background

The Background setting allows you to customize the backdrop behind your Justified Gallery block. You can choose any color from your theme palette or define a custom color to help your images stand out or blend seamlessly with the surrounding layout.

A subtle background tone can make white borders or drop shadows more visible, while a dark background often enhances contrast and gives a cinematic look.

Dimensions – Padding & Margin

The Padding and Margin controls give you fine-grained control over the spacing inside and around your Justified Gallery block.

Use Padding to create breathing room between your gallery content and its edges — useful for highlighting the gallery within a colored background.

Use Margin to control the outer spacing between the gallery and adjacent blocks or page sections, ensuring perfect alignment and balance within your overall page design.

Border Color, Width, & Radius

These settings allow you to add custom borders to the images in your gallery. Select the color of your border and then adjust the border width slider to your liking.

The images in the editor update in real time so you can see how they look without having to visit the front end of the site.

Border Radius slider allows you to add a radius to the corner of the images to further create special effects.

Enable Drop Shadow

Enable Drop Shadow adds a subtle drop shadow to your images that helps them pop off the page.

When Enable Image Filtering is active the Filter Bar Styles panel will be present in the Grid Gallery Block’s style panel.

Font-Family, Font Size, Appearance, Line Height, Letter Spacing, Decoration, & Letter Case

When using a block based theme that uses theme.json FolioBlocks will detect available fonts and let you set the font for the Filter Bar. Additional controls allow you to set Font Size, Appearance, Line Height, Letter Spacing, Decoration, and Letter Case styles.

Active – Text Color & Active – Background Color

These two settings allow you to set the color and background color for the active term in the Filter Bar.

Inactive – Text Color & Inactive – Background Color

These two settings allow you to set the color and background color for the inactive terms in the Filter Bar.

Note: The font used in the Filter Bar for Active and Inactive terms is pulled from your theme’s body font.