How To Use FooBox With Gutenberg

Gutenberg, the new editor for WordPress, will soon come standard with WordPress. You may have even installed it already. But given that it is a fairly new addition, not all of your plugins may be compatible with Gutenberg just yet. Luckily for you, FooBox is. Below you can find out how to keep FooBox working as it should, once you’ve installed Gutenberg.

How FooBox Works

FooBox is a media lightbox plugin for WordPress. It allows you to open images in a box above your page, so that users don’t have to navigate away from that page. Once FooBox is activated, it works straight away, automatically opening your images in the lightbox. There’s no need to change any settings or tick any boxes.

FooBox And Gutenberg Images

If you haven’t already done so, install and activate FooBox on your WordPress site. All the necessary settings should be enabled.

Add your media. This is slightly different with Gutenberg, as you’re no longer redirected to the Add Media screen. Instead you’ll now be able to upload your images directly to your post. Simply click on the Add Image button in the top of the block. From there, you’ll either be able to upload or access your media library.

Add Media to Gutenberg editor on WordPress

Once you’ve uploaded your images, you’ll be able to add Alt Text and adjust the size of the image in the menu on the right hand side of the editor. You can select the image size you want, such as Full or Thumbnail, or you can adjust the size based on the percentage.

From this menu you’ll also be able to link your image to the URL, enabling it to open in FooBox. For this, go to the Link Settings in the menu and select Media File. A URL will be automatically generated.

If you want to further edit your image, you can click on the image block. Here you can adjust the image alignment or change the size by using the toggles on the side of the frame. You can also add your caption here, making it bold or italicised, and you can add a link to it. The captions you add to the image within Gutenberg will automatically be picked up by FooBox.

Edit image in Gutenberg

FooBox and Gutenberg Galleries

If you want to create a gallery in Gutenberg, then you can still make use of FooBox, thereby enabling your gallery images to open in a lightbox. To do this, you can select the gallery block under Common Blocks. You will then be able to load and edit multiple images.

To enable FooBox, go to the block settings in the right hand menu. Find where it says Link To and click on the Media File option. Your images are now able to be opened in FooBox from the gallery.

Link to media file to enable FooBox in a gallery

Using FooBox allows you to really showcase your images. FooBox PRO gives you added features, letting you adjust the theme and style of the box. And FooBox Free and PRO both work with Gutenberg.

Try it out for yourself today.

Leave a Comment