Skip to content

How to Add a Lightbox to WordPress Image Block

WordPress doesn’t include a default lightbox for images. Instead, users can either build their own custom solution or use one of the many plugins in the WordPress repository.

A plugin would be the obvious choice for most users that don’t want to tinker around with code. The only challenge however is finding a lightbox plugin that meets one’s needs.

For example, I needed a lightbox for this blog as I often upload large images to some posts, usually screenshots, that I would like for my readers to be able to enlarge.

To do this, I usually use a smaller size of the image (e.g the medium size) on the post, then link to the full media size that I uploaded.

This way, the page performance is not impacted by loading a large image, however the reader can click to load and view the full size image on demand. The only issue is that this opens the image on the same tab and the reader has to go back in order to continue from where they left.

It’s in these type of situations that a lightbox comes in handy, as it essentially acts a pop-up which can be easily dismissed without triggering unnecessary reloads.

Advertisements

WordPress LightBox Plugins

In my case, a plugin that opens a lightbox only when the image is linked to the full media size would suffice. I imagine this would be the case for most people that are looking for a lightbox as it doesn’t make much sense putting a lightbox on all images.

Surprisingly, that’s what most plugins actually do — they add a lightbox to any image on a post, though in their defence some do have options to exclude some images.

This is not the most elegant solution, but it does make sense for sites that are primarily showcasing images or galleries (e.g. a photography blog).

A good one that works this way is Meow lightbox. It’s very simple to use, has some nice features for photographers and is excellent performance-wise. It’s the one I’d recommend if you want to add a lightbox to all images with the ability to add exceptions using image classes.

Advertisements

Lightbox for Linked Images Only

If you however need a solution that only adds a lightbox to images linked to their full media size or attachment page, then the plugin you want is Lightbox for Gallery & Image Block.

This simple lightweight plugin detects if a post has an image or gallery block and only then loads the lightbox script. The script itself is very small, weighing at 13kb and has no other dependencies, so you don’t have to worry about page speed.

However, for the lightbox to launch, the image block has to be linked to the media file or the attachment page. This is actually a good thing, as it allows you to control which images get a lightbox in a straightforward way that is self-contained. I have a tutorial on how to do that you can refer to.

An image illustrtaing a WordPress lightbox in action.
Click to view the Lightbox in action. The above image is the medium version, the one in the lightbox is the full media size that I uploaded.

It is worth noting that the plugin will only work with images added using the Image or Gallery blocks. Images added within the classic editor block will not get the lightbox as illustrated below.

An image illustrtaing a WordPress lightbox in action.

Image linked to media file, but added in a classic editor block. Clicking it does not launch the lightbox.

Advertisements

Link Images to Media File by Default

Since WordPress 5.6 it’s possible to set the default behaviour for all images to link to their media file.

Be careful enabling this option, as this will essentially make any image you add to a post link to the media file by default. Images already added to old posts will however not be affected.

To access this setting you need to go the All settings page which you can access by loading www.example.com/wp-admin/options.php. Replace www.example.com with your blog’s URL.

On this page, search for the option image_default_link_type and set the value from none to file. After doing this, scroll to the bottom of the page and click the Save Changes button.

Alternatively, you can add the following code snippet to your functions.php if you’re using WordPress 5.7 or later with PHP 7.4 or later.

add_filter( 'option_image_default_link_type', fn () => 'file' );

All images added to your posts will now by default link to their media file. As a result, the plugin will add a lightbox to all of them. As such, you may want to skip enabling this option if you prefer to add lightbox to images selectively.

Tags:

Author

Kelvin Kathia is a blogger that's passionate about finding and sharing solutions to everyday tech problems. He's the founder and editor of Journey Bytes, a tech blog and YouTube channel. Feel free to leave me comments or questions regarding this post or by contacting me directly.

Leave a Reply

Feel free to share your comments or questions with me. I may not be able to respond immediately so please check later once I've approved your comment.

Your email address will not be published.