Build a Filmstrip Gallery in the WordPress Block Editor

Styles Panel

The Styles panel contains all visual styling options.

For the Justified 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 Justified Gallery Block.

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 Postions

Choose between three layout options, thumbnails beneath the main image viewer, thumbnails to 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.

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: Option will only be 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 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 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 toggle and activate the Lightbox, when activated will display additional Lightbox controls for Lightbox Appearance and Lightbox Content.

Note: This is only available when the Link Target dropdown 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.

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 Gallery 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 gallery or image is linked to WooCommerce.

Starting with FolioBlocks 1.4, individual Image Blocks within the any gallery block can now override the gallery’s default Click Settings and 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 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.

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.