In this tutorial, we dive into enhancing the visual presentation of images and galleries on your website using the Kubrick 2024 theme. We’ll explore the integration of the “WP Featherlight” plugin, a free and user-friendly tool that adds a sophisticated popup lightbox effect to your images and galleries. Additionally, we’ll discuss the “Expand on click” feature available for block images as an alternative. While this option offers a different user experience without captions, it provides simplicity in setup and use.

Using the WP Featherlight Plugin

screenshot showing the WP Featherlight plugin for your lightbox which also displays a caption

Using the Block Editor “Expand on Click”

screenshot showing the WordPress block editor's own lightbox using the Expand on click option.

Comparing WP Featherlight Plugin vs. Block Editor’s Expand on Click

Feature/AspectWP Featherlight PluginExpand on Click
Caption Support✓ Supports captions for added context.✕ Lacks caption support.
User Experience✓ Offers a sophisticated, professional look.✓ Simple, straightforward presentation.
Ease of Setup✓ Easy to install and configure.✓ Natively integrated, no extra setup.
Customization✓ More customizable options.✕ Limited customization.
Consistency Across Devices✓ Consistent appearance on all devices.✓/✕ Varies depending on theme support.
Performance Impact✕ Might slightly affect page load times.✓ Generally lighter on resources.
Overall Aesthetics✓ Enhances visual appeal of the site.✓/✕ Depends on theme and content.

This table provides a visual comparison of the key features and considerations when choosing between using a lightbox plugin like WP Featherlight and the block editor’s own Expand on Click feature.

Setup: Using the Plugin

When you are in your WordPress website admin area, go to Plugins > Add New Plugin

Search for WP Featherlight and install/activate it. Once done, any image or gallery just needs to have the option to open the image by linking it to the Media File.

For the Classic Editor:

Insert your image into the post and then click it to edit. You want to link it to the Media File. Once done, save the post and try it out on the front of your website.

Screenshot showing how to edit an image using the Classic editor and adding a link to it
screenshot showing the setting to add the link to your image when using the Classic editor.

For the Block Editor:

Insert your image and click on it. With the popup context menu, add a link to your image—in this case, link to the Media File.

screenshot showing an inserted image using the block editor and adding a link to it.

Using the Block Editor Expand On Click

This will only work if you are using the block editor. With your post open in the editor, insert or use an image that is already there, and click on it. In the right side column, look for the Expand On Click setting and enable it. Click Save or Update on your post.

screenshot showing the block editor's Expand on click feature that creates a basic popup lightbox.

NOTE: Make sure your image is linked to the Media File, and to prevent conflicts, disable any “lightbox” plugins.