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.
The Filmstrip Gallery Block in FolioBlocks helps you create a focused image browsing experience directly inside the WordPress Block Editor. Instead of showing every image at the same size, it keeps one large image in focus while giving visitors a row of thumbnails for quick navigation.
This makes it a strong choice for portfolios, case studies, product showcases, client galleries, and visual stories where each image deserves more attention. With responsive layouts, Lightbox support, fullscreen viewing, autoplay, styling controls, and optional Pro features like downloads, WooCommerce linking, and lazy loading, the Filmstrip Gallery Block gives you an elegant way to guide visitors through a curated image sequence.
Table of Contents
What Is the Filmstrip Gallery Block?
The Filmstrip Gallery Block is a FolioBlocks gallery layout that displays a large featured image with thumbnail navigation below. Visitors can move through the gallery by clicking thumbnails or using the navigation controls, creating a more focused browsing experience than a traditional grid.
It is ideal when you want each image to feel important instead of competing with the rest of the gallery. Use it for photography portfolios, featured projects, product details, before-and-after sets, travel stories, editorial galleries, or any collection where the viewing experience should feel guided, polished, and intentional.
How to Add the Filmstrip Gallery Block
1. Insert the Block
In the WordPress Block Editor, click the ➕ Add Block button and search for “Filmstrip Gallery.” You’ll find it under the FolioBlocks section.
Another option to add the block is to type / followed by the block name (Filmstrip Gallery) from inside the block editor.
2. Upload or Select Images
Once you have added the Filmstrip Gallery to 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 & Reorder Images
Use the alignment controls in the Filmstrip Gallery block’s toolbar to select Content Width, Wide Width, or Full Width.
Because the gallery images are added as inner blocks, rearranging them is super simple. You can select images and reorder them by dragging and dropping directly in the editor or by using the List View panel.
Understanding the Gallery & Image Block Panels
The Filmstrip Gallery Block is built using Inner Blocks, meaning each image in the gallery is its own individual Image Block. Both the main gallery block and each Image Block share the same three-panel layout in the WordPress Block Editor:
Content Panel
The Content panel contains controls related to the content of the selected block.
For the parent Gallery Block, it lists all of the images in the gallery, acting as an additional place to drag and drop to rearrange images, or add images.
On individual Image Blocks, the Content panel contains image-specific information such as the image title, caption, description, and alt text.
Settings Panel
The Settings panel contains the functional behavior of the block.
For the parent Gallery Block, this is where you’ll find controls such as General Gallery Settings, Gallery Click Settings, and Gallery Hover Settings.
When an individual Image Block is selected, the Settings panel contains image-specific options to override the gallery-level Gallery Click Settings and Gallery Hover Settings.
Styles Panel
The Styles panel contains all visual styling options.
For the Filmstrip Gallery Block this includes settings for the gallery background, spacing, borders, drop shadows, filter bar styling, and other appearance-related controls.
Throughout the rest of this guide, we’ll reference these three panels as we explore each feature of the Filmstrip Gallery Block.
General Filmstrip Gallery Settings
Main Image Resolution
Set the file size of the main image in the Filmstrip Gallery.
Enable Autoplay
With this enabled the Filmstrip Gallery will autoplay on the front end. Activating this enables additional controls to set the Autoplay speed and Pause the Autoplay when hovered over the gallery.
Thumbnail Positions
Choose between three layout options, thumbnails beneath the main image viewer, thumbnails to the left of the main image viewer, or thumbnails to the right of the main image viewer.
Enable Full-Screen Mode
Enables the Filmstrip Gallery to go Full-Screen on the front end.
Randomize Image Order
With this enabled the Filmstrip Gallery will randomize the image order on the front end every time the page is loaded.
Gallery Click Settings
All features related to what happens when you click on a gallery image are grouped into a panel called Gallery 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, or WooCommerce Product.
Note: WooCommerce Product only displays if WooCommerce is installed and active.
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 are two toggle controls. Show Image Counter displays the current image number and total number of gallery images in the top-left corner of the Lightbox. Enable Lightbox Zoom 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 all of the gallery images link to the source file so they are 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 dropdown 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 gallery 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 activate the Lightbox. When activated, it displays additional Lightbox controls.
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 all the gallery thumbnails 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 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 gallery images to custom URLs. Linking is done on the individual Image blocks from a search field that is added to their Settings panel.
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 dropdown 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 gallery 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 activate the Lightbox. When activated, it displays additional Lightbox controls.
Note: This is only available when the Link Target dropdown is set to Link Target Icon.
When the Image Click Behavior setting on the gallery block is set to Link Image to Custom URL, you can then select any individual Image Block within the gallery and link it directly to a custom URL.
To do this, open the Image Block’s Settings panel and expand the Image Click Settings panel. There you’ll find a searchable field that lets you quickly enter a custom URL.
For faster access, a Link button is also available in the Image Block toolbar. Clicking this button opens the same URL selection interface.
Link Image to Page/Post
Selecting Link Image to Page/Post in the Image Click Behavior dropdown will allow you to link the gallery images to Pages or Posts on your WordPress site. Linking is done on the individual Image blocks from a search field that is added to their Settings panel.
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 dropdown 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 gallery 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 activate the Lightbox. When activated, it displays additional Lightbox controls.
Note: This is only available when the Link Target dropdown is set to Link Target Icon.
When the Image Click Behavior setting on the gallery block is set to Link Image to Page/Post, you can then select any individual Image Block within the gallery and link it directly to a page or post on your WordPress site.
To do this, open the Image Block’s Settings panel and expand the Image Click Settings panel. There you’ll find a searchable field that lets you quickly find and select a page or post from your WordPress website.
For faster access, a Link button is also available in the Image Block toolbar. Clicking this button opens the same Page/Post selection interface.
WooCommerce Product
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: This option is only 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 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 allows you to decide if you want the link to be placed on an icon or on the thumbnail image.
The Display Add to Cart Icon dropdown 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 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 activate the Lightbox. When activated, it displays additional Lightbox controls.
Note: This is only available when the Link Target dropdown is set to Link Target Icon.
When the Image Click Behavior setting on the gallery block is set to WooCommerce Product, you can then select any individual Image Block within the gallery and link it directly to a product in your WooCommerce store.
To do this, open the Image Block’s Settings panel and expand the Image Click Settings panel. There you’ll find a searchable field that lets you quickly find and select any product from your WooCommerce catalog.
For faster access, a Shopping Cart button is also available in the Image Block toolbar. Clicking this button opens the same product selection interface.
Gallery Hover Settings
From the Gallery Hover Settings panel, you can control image hover effects, overlay styles, overlay animations, and the content displayed when visitors hover over gallery images.
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 gallery block’s Styles panel and the Gallery 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
Note: The Show Product Info option is only available when gallery or 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 gallery. 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 gallery. 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
Gallery Styles Panel
Dimensions: Padding & Margin
The Dimensions settings let you set padding and margin around the Filmstrip Gallery block.
Gallery Styles: Light & Dark Modes
In the Gallery Styles panel you can switch between Light & Dark modes for the Filmstrip Gallery.
Gallery Hover Styles
The Gallery Hover Styles panel displays in the gallery block’s Styles section only when overlays are active in the gallery.
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.
Per-Image Overrides for Gallery Click & Hover Settings
Individual Image Blocks within any gallery block can override the gallery’s default Gallery Click Settings and Gallery Hover Settings.
Simply select an image inside the gallery and enable either Override Gallery Click Settings or Override Gallery Hover Settings in the Image Block’s Settings panel. Once enabled, the same controls available at the gallery level become available for that specific image, allowing you to customize its behavior independently of the rest of the gallery.
This feature unlocks a new level of creative flexibility. For example, you can create a gallery where most images open in the Lightbox, while selected images link to pages, posts, external URLs, or WooCommerce products. You can also mix and match hover effects, giving individual images their own overlay colors, metadata displays, animations, and interactive behaviors.
The result is a gallery experience that can be tailored on an image-by-image basis, making it easier than ever to highlight important content, guide visitors through your site, or create more engaging visual layouts.
To help you keep track of what gallery images have overrides enabled the Image Block’s icon will turn blue when either Override Gallery Click Settings or Override Gallery Hover Settings are active.
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.
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.
Frequently Asked Questions (FAQ)
When should I use the Filmstrip Gallery instead of Grid or Masonry?
Use Filmstrip when you want one image to stay in focus while visitors browse with thumbnails.
Can I reorder images after adding them?
Yes, images can be reordered in the editor or List View.
Can Filmstrip Gallery images open in a Lightbox?
Yes, images can open in the FolioBlocks Lightbox.
Does the Filmstrip Gallery work on mobile?
Yes, it is responsive across desktop, tablet, and mobile.
Can I use it with WooCommerce?
Yes, Pro users can connect images to WooCommerce products when WooCommerce is active.
Does it work with my theme?
For the best experience, we recommend using a block-based theme. However FolioBlocks does work with classic themes provided they support wp_block_styles and the block editor.
Does the Grid Gallery Block work with my version of WordPress?
The Filmstrip Gallery 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 build your first filmstrip gallery? Download FolioBlocks for free or upgrade to Pro for advanced features like downloads, WooCommerce integration, hover overlays, and Lightbox controls.
Get FolioBlocks and start creating stunning, responsive galleries in the WordPress Block Editor today.