Last Updated:
The Justified Gallery Block in FolioBlocks lets you create stunning, edge-to-edge photo galleries directly inside the WordPress Block Editor (Gutenberg) — no short-codes, no settings screens, no fuss.
Note: This article focuses on the Professional (Pro) version of FolioBlocks. Some of the features described here may not be available in the free version.
Table of Contents
What Is the Justified Gallery Block?
The Justified Gallery Block arranges your images in rows and automatically adjust their height to fill the available space, maintaining each image’s aspect ratio while keeping the rows perfectly aligned.
This elegant gallery style was popularized by Flickr, and is often referred to as the “Flickr layout” — a balanced, edge-to-edge design that shows images at their natural proportions without awkward cropping.
Perfect for:
- Landscape-oriented photography
- Event or travel galleries
- Editorial and journalistic image collections
- Full-width portfolios with a modern, professional look
How to Add the Justified Gallery Block
1. Insert the Block
In the WordPress Block Editor, click the ➕ Add Block button and search for “Justified Gallery.” You’ll find it under the FolioBlocks section.
Another option to add the block is to type / followed by the block name (Justified Gallery) from inside the block editor.
2. Upload or Select Images
Once you have placed the Justified Gallery block into the Editor a placeholder will invite you to choose images from the Media Library or upload new ones in order to create your gallery.
3. Adjust Gallery Width & Moving Images
Use the alignment controls in the Justified Gallery block’s toolbar to select Content Width, Wide Width, or Full Width.
Because the gallery images are added as inner blocks re-arranging them is super simple. You can select images at once reorder them later by dragging and dropping directly in the editor or using the List View panel.
General Gallery Settings
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 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.
Note: Enable Image Downloads can not be used when Enable WooCommerce Integration is active.
Enable WooCommerce Integration
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.
Gallery Image Settings
Built-In Lightbox
Enable the built-in Lightbox to let visitors view your images full-screen when the user clicks on them.
It supports keyboard navigation, swipe gestures, and the option to show image captions within the Lightbox view.
Note: Show Caption in Lightbox control only displays when Enable Lightbox is active
Show Title on Hover
Display image titles on hover to provide context or credits.
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.
Gallery Filter Settings
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.
Once you have added your categories you can now select the individual images inside your Justified Gallery Block and in their block settings there will be a new Filter Categories dropdown select control where you can apply one of the categories to the image.
Note: Additional style options for the Filter Bar are available in the blocks style settings panel.
Once you have assigned categories to all your images you will be able to filter the gallery directly in the block editor exactly the same as your visitors will be able to on the front-end of your website.
Gallery Styles Panel
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.
Gallery Image Styles
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.
Filter Bar Styles
When Enable Image Filtering is active the Filter Bar Styles panel will be present in the Justified Gallery Block’s style panel.
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.
WooCommerce Integration
Display Add To Cart icon
With Enable WooCommerce Integration turned on you will be presented with a new select control that lets you choose if you want to always display the Add To Cart button or Display it only Hover.
Gallery Image Settings for WooCommerce
Additional settings controls are added in Gallery Image Settings. If you Enable Lightbox you will now have the option to Show Image Caption or Product Info inside the Lightbox.
The same applies to Show Overlay on Hover, it now gives you the option to display the Image Title or to display the Product Name & Price.
These two options downgrade gracefully so there is no need for you to link every image in your gallery to a WooCommerce product. Image linked to products will display the Product Description in Lightbox or Product Name & Price on Hover and Images not linked to WooCommerce products will default to showing the Image Caption in the Lightbox and the Image Title on Hover.
Linking Images to WooCommerce Products
Linking your images to products is super simple, with Enable WooCommerce Integration turned on simply select one of the image blocks in your gallery and look in the block settings.
You will see a new setting available, Linked WooCommerce Products, with an input field that allows you to search through the all of the WooCommerce Products on your site.
Simply search for your product and select it to link it with the image.
Note: The settings for Linked WooCommerce Products only appear when Enable WooCommerce Integration is active on the parent gallery block.
Example Justified Gallery
Below is an example of a Justified Gallery created with FolioBlocks:
Common Questions
How many images can I add?
There are no limits on how many images you can add.
Can I reorder or replace images?
Yes — drag and drop directly in the editor or reorder via the List View.
Does it work with my theme?
For the best experience it is recommended to use a block based theme. However FolioBlocks does work with classic themes provided they support wp_block_styles and the block editor.
Is it compatible with WordPress 6.x or newer?
Absolutely. FolioBlocks are built for the WordPress Block Editor (Gutenberg) and optimized for modern WordPress standards.
Get Started
Ready to build your first justified gallery? Download FolioBlocks for free or upgrade to Pro for advanced features like filtering, downloads, and WooCommerce integration.
Get FolioBlocks and start creating stunning, responsive galleries in the WordPress Block Editor today.