Updated: June 19th, 2026 for FolioBlocks Version 1.4 running on WordPress 7.0 or higher
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.
A single image can often have more impact than an entire gallery. Whether you’re showcasing a portfolio piece, displaying a product photo, highlighting a case study, or adding visual interest to a blog post, the Image Block gives you complete control over how individual images appear on your website.
In this tutorial, we’ll show you how to add an Image Block to your page, customize its appearance, and take advantage of powerful FolioBlocks features such as Lightbox viewing, hover overlays, image downloads, WooCommerce integration, and more.
Table of Contents
Why Use the Image Block?
The Image Block is the foundation of the entire FolioBlocks image gallery system.
Every image displayed inside the Grid Gallery, Masonry Gallery, Justified Gallery, Modular Gallery, Carousel Gallery, and Filmstrip Gallery is powered by the same Image Block technology. This means the same powerful features available when displaying a single image are also available throughout the FolioBlocks gallery ecosystem.
The standard WordPress Image Block is useful for basic image placement, but it lacks many of the features photographers, designers, artists, and businesses need.
The FolioBlocks Image Block allows you to:
- Open images in a Lightbox
- Add hover overlays
- Display captions and metadata
- Allow image downloads
- Link images to products or pages
- Add borders, shadows, and styling effects
- Disable right-click protection
- Integrate with WooCommerce
- Sync image metadata with the WordPress Media Library
This makes it ideal for portfolios, product showcases, client work, and visual storytelling.
Add the Image Block
Open the page or post where you’d like to display your image.
Click the Add Block (+) button and search for Image Block. Insert the block into your page.
You will immediately be prompted to select or upload an image from your WordPress Media Library.
Selecting Your Image
Choose an existing image or upload a new one. Once selected, the image will appear directly in the editor.
Once you have selected your image it will be rendered into the editor.
Block Toolbar
The Image Block’s toolbar gives you access to Alignment Controls allowing you switch between Content, Wide, or Full-Width. It has a button allowing you to apply a Dual-Tone Filter over the image, and a button to change the image.
Understanding the Image Block Panels
The FolioBlocks Image Block organizes its controls into three panels within the WordPress Block Editor: Content, Settings, and Styles. Each panel groups together related options, making it easy to find the controls you’re looking for.
Content Panel
The Content panel contains information about the image itself.
There is a thumbnail of the image and an option to change the image.
After that there is a section where you can edit properties such as the image title, caption, description, alternative text. There is also a button labelled Sync to Media Library that allows you to sync any changes made to the metadata back to your WordPress library.
Then there is a section displaying the EXIF Data for your image. If the EXIF Data has been striped from the images it will list as unknown.
If you’re using the Image Block within a gallery and Enable Image Filtering is active, this panel is also where you’ll assign Filter Categories to the image.
Settings Panel
The Settings panel contains options that control how the image behaves on your website.
Depending on your configuration, this panel includes features such as Image Click Settings, allowing you to configure what happens when visitors click the image. You can also configure links to custom URLs, pages and posts, WooCommerce products, image downloads, Lightbox behavior, and other interactive features.
When the Image Block is used inside one of the FolioBlocks gallery blocks, this panel also includes Per-Image Gallery Overrides, allowing the selected image to override the gallery’s default Click and Hover Settings.
Styles Panel
The Styles panel contains all visual appearance settings for the image.
From here you can customize options such as borders, border radius, drop shadows, and other design-related settings that control how the image is displayed on the front end of your website.
Throughout the rest of this guide, we’ll explore each of these panels in detail and explain how they work together to help you create beautiful, responsive images in the WordPress Block Editor.
Image Block Settings
Resolution
Choose between Thumbnail, Medium, Large, or Full image sizes to balance sharpness and page load speed.
Image Click Settings
As of version 1.3 of FolioBlocks all features related to what happens when you click on an image are grouped into a panel called Image Click Settings. Clicking on the Image Click Behavior drop down reveals the following options:
- None
- Open in Lightbox
- Enable Image Downloads
- Image to Media File
- Link Image to Custom URL
- Link Image to Page/Post
- WooCommerce Product.
Note: WooCommerce Product only displays is WooCommerce is installed and active
Open in Lightbox
Selecting Open in Lightbox in the Image Click Behavior dropdown will activate the Lightbox on the website’s front-end. The Lightbox supports keyboard navigation and swipe gestures and full-screen mode.
When Open in Lightbox is selected in Image Click Behavior a control for “Lightbox Appearance” allows you to switch between the Lightbox’s Light & Dark modes.
An additional dropdown titled “Lightbox Content” allows you to select what displays inside of the Lightbox alongside the image. You can select from:
- None
- Show Image Title
- Show Image Caption
- Show EXIF Data
- Show Image Title & EXIF Data
- Show Image Caption & EXIF Data
- Show Image Title & Caption
- Show Image Title, Caption, & EXIF Data
Enable Image Downloads
Selecting Enable Image Downloads in the Image Click Behavior dropdown will make all of the image link to the source file so it is available for download in the front-end of the website.
The Link Target drop down allows to decide if you want the link to be placed on an icon or on the thumbnail image.
The Display Image Download Icon drop down allows you select if the Download icon is always displayed, displayed on hover, or never displayed.
Note: With Enable Image Downloads selected an additional control is added into the Image block’s Styles panel. This control allows you to set the color of the Download icon as well as its background color.
Finally the Enable Lightbox control allows you to toggle and activate the Lightbox, when activated additional Lightbox controls will display for Lightbox Appearance and Lightbox Content.
Note: This is only available when the Link Target dropdown set to Link Target Icon.
Link Image to Media File
Selecting Link Image to Media File in the Image Click Behavior dropdown will make all the image link to their source file. However clicking the link will not trigger a download but open the source file in the browser.
This setting is useful is you want to use a 3rd party Lightbox rather than the Lightbox that is included with FolioBlocks.
Link Image to Custom URL
Selecting Link Image to Custom URL in the Image Click Behavior dropdown will allow you to link the image to a custom URL.
Note: Images that are not linked will not have an empty hyperlink added.
The Link Target drop down allows to decide if you want the link to be placed on an icon or on the thumbnail image.
The Display Link Target Icon drop down allows you select if the Link icon is always displayed, displayed on hover, or never displayed.
Note: With Link Image to Custom URL selected an additional control is added into the image block’s Styles panel. This control allows you to set the color of the Link icon as well as its background color.
Finally the Enable Lightbox control allows you to toggle and activate the Lightbox, when activated additional Lightbox controls will display for Lightbox Appearance and Lightbox Content.
Note: This is only available when the Link Target dropdown set to Link Target Icon.
Link Image to Page/Post
Selecting Link Image to Page/Post in the Image Click Behavior dropdown will allow you to link the image to Pages or Posts on your WordPress site.
The Link Target drop down allows to decide if you want the link to be placed on an icon or on the thumbnail image.
The Display Link Target Icon drop down allows you select if the Link icon is always displayed, displayed on hover, or never displayed.
Note: With Link Image to Page/Post selected an additional control is added into the image block’s Styles panel. This control allows you to set the color of the Link icon as well as its background color.
Finally the Enable Lightbox control allows you to toggle and activate the Lightbox, when activated additional Lightbox controls will display for Lightbox Appearance and Lightbox Content.
Note: This is only available when the Link Target dropdown set to Link Target Icon.
WooCommerce Product
Selecting WooCommerce Product from the Image Click Behavior dropdown will allow you to link the image to WooCommerce product in your WordPress website.
Note: Option will only be available when the WooCommerce plugin is installed and active.
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 drop down 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 displayed, displayed on hover, or never displayed.
Note: With WooCommerce Product selected an additional control is added into the image 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 and activate the Lightbox, when activated additional Lightbox controls will display for Lightbox Appearance and Lightbox Content.
Note: This is only available when the Link Target dropdown set to Link Target Icon.
Image Hover Settings
From the Image Hover Settings panel you can set if images will display an overlay when you hover over them.
Hover Style
The Hover Style dropdown allows you to select from:
- None
- Fade Overlay
- Gradient Bottom
- Chip
- Color Overlay
Notes: With the Color Overlay or Chip selected you can additionally customize the color of the text and background of the Overlay by going to the Styles panel and the Image Hover Styles section.
Overlay Content
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
- Show Product Info
Notes: Show Product Info option is only available when the image is linked to WooCommerce.
Image Styles
Border Color, Width, & Radius
These settings allow you to add custom border to the Image Block. Select the color of your border and then adjust the border width slider to your liking.
The Image Block in the editor updates in real time so you can see how it looks without having to visit the front-end of the website.
Border Radius slider allows you to add a radius to the corner of the Image Block to further create special effects.
Drop Shadow
The Drop Shadow dropdown allows you to select from a variety of Drop Shadow effects and apply them to the Image Block. You can select from the following types of Drop Shadow:
- None
- Subtle
- Soft
- Elevated
- Dramatic
Page/Post Settings
Starting with FolioBlocks 1.4, several controls that were previously located in the block’s Advanced settings have been moved to a dedicated FolioBlocks Page Settings panel in the Page/Post sidebar.
These features operate at the page level rather than the individual block level, so moving them out of the block settings creates a more intuitive editing experience and prevents the same feature from being enabled multiple times when a page contains several FolioBlocks blocks.
The FolioBlocks Page Settings panel is automatically added to the Page or Post sidebar whenever a FolioBlocks block is inserted into the WordPress editor. From this central location, you can configure settings that apply across the entire page, including the following features:
Password Protect Page
Requires a password before visitors can view the page.
Disable Right-Click on Page
Attempts to disable right-click to discourage casual image downloads.
Note: This makes it harder for casual users to save images, but it’s not foolproof — advanced users can still access media via the browser’s developer tools or view source.
Enable Lazy-Load of Images
When active, images load as the user scrolls, improving initial page load speed.
Example Image Block
Below is an example of an Image Block created with FolioBlocks:
Common Questions
Can I use the Image Block outside of a gallery?
Yes. The Image Block is a standalone block and can be used anywhere in the WordPress Block Editor. It can also be used as an inner block within FolioBlocks gallery blocks.
Can I link an image to a page, post, or website?
Yes. The Image Block supports linking to custom URLs, WordPress pages and posts, WooCommerce products, media files, or opening the image in the Lightbox.
Can I customize the appearance of an individual image?
Absolutely. You can customize borders, border radius, drop shadows, and other styling options directly from the block’s Styles panel.
Does it work with my theme?
For the best experience, we recommend using a block theme. However, FolioBlocks also works with classic themes that support the WordPress Block Editor and wp_block_styles.
Is it compatible with WordPress 6.x or newer?
Yes. FolioBlocks is built specifically for the WordPress Block Editor (Gutenberg) and is fully compatible with WordPress 6.x and newer. For the best experience, we recommend using WordPress 7.0 or later.
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.