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.

Enable Lightbox

Enable the built-in Lightbox to let visitors view your images full-screen when the user clicks on them.

It supports keyboard navigation and swipe gestures. When activated an additional toggle to show image captions within the Lightbox view is enabled.

Note: Show Caption in Lightbox control only displays when Enable Lightbox is active

Show Overlay on Hover

The Show Overlay on Hover toggle enables an overlay effect with the Image title to display when you hover over an image.

An additional Select Control allows you to set the Hover Style where you can select from a Blur, Fade, Gradient, Chip, or Color Overlay. With the Color Overlay selected you can additionally customize the color of the text and background on the Overlay.

You can edit each image’s Caption, Title, or Alt Text directly from the image block settings.

Note: Changes made to Image’s caption, title, or alt text currently do not sync back to the WordPress Media Library.

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.

Enable Image Downloads

Allows you to add a download icon to each image thumbnail and inside the Lightbox, allowing clients or visitors to save high-resolution versions of your work.

When enabled an extra drop-down select control is enabled which allows you to specify if you want to always display the download icon or display it only when the user hovers over the image.

Settings for setting the icon & background color of the Download icon can be found in the Justified Gallery Block’s styles panel when the Enable Image Downloads setting is active.

Note: Enable Image Downloads can not be used when Enable WooCommerce Integration is active.

Enable WooCommerce Integration

This toggle enables WooCommerce Integration allowing you to link gallery images with WooCommerce products on your website. Instructions for WooCommerce integration are included later in this tutorial.

Note: Toggle for Enable WooCommerce Integration will only display if WooCommerce plugin is installed and active on your website. Enable WooCommerce Integration can not be used when Enable Image Downloads is active.

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.