How to Add a Lightbox to the Gutenberg Gallery Block

Lightbox

WordPress has a useful block called “Gallery” which allows you show to multiple images together.

With the PublishPress Blocks plugin, you can improve the gallery block and show WordPress images inside a lightbox modal. This feature is not available in the normal WordPress image block.


Enabling and Disabling Lightboxes for Galleries

This feature is on the Configuration screen in PublishPress Blocks. This will modify the default “Gallery” block in WordPress.

  • Open galleries in lightbox: This will automatically add a lightbox display to images in the “Gallery” block.
  • Image caption: This feature will automatically take the ALT text for an image and show it as captions for images in lightboxes.
Open galleries in a lightbox

How to Use the Lightbox

Here's a video guide to help you use the lightbox feature:

We also have a text and image guide to help you use the lightboxes.

  • Open up a WordPress post.
  • Add a “Gallery” block to your content:
WordPress Gallery blocks
All Gallery
  • Add images to your gallery.
Gallery Block - add images
Gallery Block
  • In this screenshot below, I've added 3 images. The “Write gallery caption” option is added by PublishPress Blocks.
Gallery Images
Gallery Images
  • Publish your post with the image gallery.
  • Even though a “lightbox” setting wasn't visible, you will be able to click on any image in the gallery and see it in a lightbox. There will be arrows on each side of the gallery so you can navigate to the next image.
Gallery Lightbox
Gallery Lightbox

PublishPress Blocks also makes this lightbox effect available for local videos.

If you liked this feature, you find enjoy other PublishPress Blocks features including the table of contents, accordion block, image slider block, testimonials display and count up block.


Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE