Updated: August 12th, 2026 for FolioBlocks Version 1.5 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 effects & overlays
- Display captions and metadata
- Allow image downloads
- Link images to products or pages
- Add borders, shadows, and styling effects
- Disable right-click & drag to save
- Integrate with WooCommerce
- Add watermark overlays
- 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 toolbar gives you access to alignment controls, allowing you to switch between Content, Wide, and Full Width. It also includes a Change Image button.
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 labeled 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 dropdown reveals the following options:
- None
- Open in Lightbox
- Enable Image Downloads
- Link Image to Media File
- Link Image to Custom URL
- Link Image to Page/Post
- WooCommerce Product.
Note: WooCommerce Product only displays if 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
- Show Social Media
Lastly, there is a control for Enable Lightbox Zoom. It lets users double-click the image, or click the magnifying glass icon in the bottom-right corner of the Lightbox, to enter zoom mode where they can drag and pan around the image.
Enable Image Downloads
Selecting Enable Image Downloads in the Image Click Behavior dropdown will make the image link to the source file so it is available for download in the front end of the website.
The Link Target dropdown lets you 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 to 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 is set to Link Target Icon.
Link Image to Media File
Selecting Link Image to Media File in the Image Click Behavior dropdown will make the image link to its source file. However, clicking the link will not trigger a download but open the source file in the browser.
This setting is useful if you want to use a third-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 dropdown lets you 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 to 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 is 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 dropdown lets you 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 to 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 is set to Link Target Icon.
WooCommerce Product
Selecting WooCommerce Product from the Image Click Behavior dropdown will allow you to link the image to a WooCommerce product in your WordPress website.
Note: This option is only available when the WooCommerce plugin is installed and active.
The Default Product Link Behavior dropdown lets you 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 lets you 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 to 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 is set to Link Target Icon.
Image Hover Settings
From the Image Hover Settings panel, you can control how the image responds when visitors hover over it, including hover effects, overlay styles, overlay animations, and the content displayed inside the overlay.
Hover Effect
The Hover Effect dropdown allows you to select from the following effects:
- None
- Desaturate
- Glare
- Lift
- Pan
- Pop
- Tilt
- Zoom In
- Zoom Out
Overlay Style
The Overlay Style dropdown allows you to select from:
- None
- Blur Overlay
- Bottom Gradient Overlay
- Chip Overlay
- Chip Gradient Overlay
- Color Overlay
- Fade Overlay
- Gradient Overlay
Note: All overlays have additional style controls that you can customize by going to the Image Block’s Styles panel and the Image Hover Styles section.
Overlay Entrance
The Overlay Entrance dropdown allows you to select how the overlay enters over the thumbnail. You can select from:
- Default
- Fade
- Slide Up
- Slide Down
- Slide Left
- Slide Right
Overlay Content
The Overlay Content dropdown allows you to select what displays inside the overlay when you hover over an image. You can select from:
- Show Image Title
- Show Image Caption
- Show EXIF Data
- Show Social Media
- Show Product Info
Notes: Show Product Info option is only available when image is linked to WooCommerce.
Watermark Overlay
The Watermark Overlay panel lets you set all the settings for watermark overlays.
Enable Watermarking
This toggle enables Watermark Overlays for the image. You need to create at least one saved watermark in FolioBlocks → Global Settings before watermarking can be enabled. If no saved watermarks exist, the panel will show a notice asking you to create one first.
Watermark
The Watermark dropdown lets you select the watermark to use on the image. It will default to the Default Watermark but if you have multiple watermarks saved you can select one of the others.
Display Watermark On
This dropdown lets you select where you will display the watermark. You can choose from:
- Gallery Images
- Lightbox
- Gallery Images + Lightbox
Image Styles
Border Color, Width, & Radius
These settings allow you to add a 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.
The Border Radius slider allows you to add a radius to the corners 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
Image Hover Styles
The Image Hover Styles panel displays in the Image Block’s Styles section only when overlays are active in the block.
Color
These settings display only for the following overlay types: Color Overlay, Gradient Overlay, Chip Overlay, and Chip Gradient Overlay. They allow you to set the text color and background color in the overlay.
Font Family & Appearance
If you are using a block-based theme FolioBlocks will pick up fonts loaded in the theme and make them available to the overlays in this Font Family dropdown control.
The Appearance dropdown control lets you set the font’s weight.
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:
Enable Lazy-Load of Images
When active, images load as the user scrolls, improving initial page load speed.
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.
Disable Drag To Save
Prevents visitors from being able to drag images out of the browser to save them.
Example Image Block
Below is an example of an Image Block created with FolioBlocks:
Frequently Asked Questions (FAQ)
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.
Does the Image Block work with my version of WordPress?
The Image Block requires WordPress 6.5 or higher. Some newer FolioBlocks features require WordPress 7.0 or higher, so for the best experience we recommend keeping WordPress updated to the latest version, especially when using modern block themes and newer editor features.
Get Started
Ready to showcase your first standalone image? Download FolioBlocks for free or upgrade to Pro for advanced features like Lightbox viewing, hover overlays, downloads, and WooCommerce integration.
Get FolioBlocks and start creating stunning, responsive galleries in the WordPress Block Editor today.