The CAES Content Lightbox block is a WordPress block that adds a pop-up lightbox to your pages or posts. With this block, you can easily add any type of content, such as text, images, or videos, to a pop-up that appears when the user clicks on a button or link.
Table of Contents
Examples of the CAES Content Lightbox
The CAES Content Lightbox shows a thumbnail, or a gallery of thumbnails, that open content in a pop-up window. Click a thumbnail below to try it. In a gallery, use the arrows to move between items.
A lightbox can also open from a link or button instead of a thumbnail:
How to add a CAES Content Lightbox
Step 1: Add the block
- Log in to your CAES or Extension WordPress site and navigate to the post or page where you want to add the block.
- Click the “Edit Page” (or Post) link at the top of the site.
- Click the “+” icon located in the top left corner of the editing screen.
- Use the search to find the CAES Content Lightbox block. Click on it to add it to your page.
- The block starts as a gallery with one item, ready for you to fill in.
Tip: To start from a ready-made layout instead, open the Patterns tab in the “+” menu and choose Content lightbox gallery. It adds three items with placeholder photos and text for you to replace.
Step 2: Fill in each item
Each item has two parts. The grey box at the top is the thumbnail and its details. The area underneath, labeled Modal content, is what appears in the pop-up.
- Thumbnail: click Upload or Media Library to choose the image visitors click.
- Set focal point: click this button, then click the most important part of the image. That part stays in view when the thumbnail is cropped to shape.
- Modal title: the heading at the top of the pop-up.
- Thumbnail caption: the short text shown with the thumbnail. Screen readers also read it as the thumbnail’s label, so describe what it opens, for example “Visit our greenhouses”.
- Modal content: add anything you like here: text, images, video embeds, columns, buttons and more.
- To add another item to a gallery, click the “+” button below the last item.
Step 3: Choose your settings
Select the lightbox block, then look at the Block Settings on the right of the screen. If an item is selected instead, click the lightbox’s name in the breadcrumb at the bottom of the editor.
- Mode: Gallery shows a grid of thumbnails with previous and next arrows in the pop-up. Single is one item on its own.
- Opens from (Single only): choose whether the pop-up opens from its thumbnail or from a link or button on the page. See Open a lightbox from a link or button.
- Items per row (Gallery only): how many thumbnails sit side by side on desktop. These will collapse down to less items per row on phones.
- Thumbnail shape: landscape, widescreen, square or portrait.
- Caption: show captions over the image, or below it.
- Block spacing: on the Styles tab (the half-circle icon), set the space between thumbnails. If you leave it alone, it matches your site’s usual spacing.
Step 4: Preview and publish
Click the eye icon in the block’s toolbar to preview the lightbox right in the editor. You can open items and move between them. Click it again to go back to editing.
Once you are done, be sure to Save or Publish your page or post draft!
Open a lightbox from a link or button
A single lightbox can open from a link or button instead of a thumbnail. Nothing shows on the page until someone clicks that link.
- In Block Settings, set Mode to Single and Opens from to A link or button on the page.
- The item now shows its link address, such as #all-about-blueberries. It is made from the modal title automatically, so there is nothing to type.
- Click Insert button below to add a button that opens it. Or click Copy link and add it as a link to any text, image or button on the page.
If nothing on the page links to the lightbox yet, the editor shows a warning so it doesn’t go unnoticed.
Good to know
Every item in every lightbox has its own link address, and the address bar shows it while the pop-up is open, so you can share a link straight to one item. If you change an item’s title, its address changes too, and links on the same page update automatically. Links shared elsewhere would stop working, so if you need an address to stay the same, set it by hand under Link to this item > Change link ID in the item’s settings.
Tips for accessible lightboxes
- Give every thumbnail a caption or a modal title. The editor warns you if a thumbnail has neither, because screen reader users would not know what it opens.
- Add alt text to images inside the modal content, just as you would anywhere else on the page.
Need help?
Check OIT’s WordPress posts for more WordPress tips.
If you have any questions about your CAES or Extension WordPress site, please let us know by contacting the CAES Web Team at caesweb@uga.edu.
