Galleries are an important content element. They help us add multiple images at the same time to showcase our content in a visual manner. Lightbox helps add interactivity to the gallery by opening the gallery in a pop-up style interface in the form of a slider. The lightbox adds interactivity to the gallery where user can take a look at the images without having to open the image or navigating away from the page.
In this article, we are going to learn how to add a lightbox to Gallery Block in WordPress Block Editor, not the gallery in Classic Editor. That is an article for another time.
This is a code focused article and I’m assuming you have a basic understanding of WordPress and Block Editor.
Understanding the Gallery Block in WordPress
The Gallery Block in WordPress does not support a Lightbox by default. We need to add the Gallery block using a third-party library. But first, let’s take a brief look at the Gallery Block in WordPress.
In the WordPress Block Editor, we can add the Gallery Block from the inserter. It is one of the core blocks in WordPress. In the Inserter, it is present in the “Media” category. It looks something like this –
Clicking on the Gallery Icon, it inserts the Gallery Block in the content area.
The block has an interface to either use existing images in the media library or upl;oad new images. Clicking on either option will open up the media modal to either select images from library or upload new images depending on the options we selected.
After the images are added, they should appear in the content area in a layout depending on the number of images added. The default layout structure for gallery layouts is defined in core.
Gallery Block Settings
After you insert the Gallery, you should be able to see the settings for the Gallery block in the right sidebar Inspector Panel. By default, the first image in the gallery is selected. You may need to select the Gallery Block manually.
In the Inspector Panel, we have two tabs – Settings and Styles. Be default, the settings tab is open with settings for the Gallery block. Let’s go through these settings.
The “Settings” Tab
The settings tab is the one selected by default. It looks like this –
Let’s go through the options.
- First, we have the Columns setting specifying the number of columns for the Gallery.
- Then we have the “Resolution” setting. By default, there are 4 options – “Thumbnail”, “Medium”, “Large” and “Full Size” with “Large” selected by default.
- Next is the “Link to” setting. Here, we can either add a link the gallery thumbnail to the image or the attachment page. By default, “None” is selected.
- “Next option is “Crop images to fit”. If enabled, images will crop and resize to fit to the layout. If disabled, the images will retain their original sizes. This option is helpful in case all images are not of the same sizes.
- The last option is “randomize Order”. When enabled, the gallery images will appear in a random order as compared to the order they were added to the gallery.
Now, let’s take a look at the styles tab.
The “styles” tab
On selecting the styles tab, the panel switches to show up options managing the styles for the gallery block. By default, it should look like this –
You’ll notice we have only one setting – Background. Here, we can change the background color of the Gallery Block. Note that this is customizable and we can add other options here. The best way to do this is using theme.json file. Check out the WordPress’ official documentation to know more theme.json.
Now that we have taken a look at the options available in the Gallery Block, let’s go ahead and add a lightbox to the Gallery Block.
Adding a Lightbox to the Gallery Block
In order to add a lightbox to the Gallery Block, we need to add a lightbox plugin. We can code our own as well but for this article we are going to use GLightbox. Let’s go ahead and start adding it.
Enqueue the files
Go ahead and download the plugin from the website. All we need are 2 files – glightbox.min.js and glightbox.min.css. They should be present in dist/js and dist/css folders respectively.
Copy these files inside your theme directory. You can copy it anywhere but for our article, we copy it in assets/lightbox folder.
After copying the files, add thr following code to the functions.php file in your theme directory –
|
1 2 3 4 5 6 7 |
function my_theme_enqueue_lightbox() { wp_enqueue_style( 'glightbox-css', esc_url(get_template_directory_uri() . '/assets/lightbox/glightbox.min.css'), array(), wp_get_theme()->get('Verion') ); wp_enqueue_script( 'glightbox-js', esc_url(get_template_directory_uri() . '/assets/lightbox/glightbox.min.js'), array(), wp_get_theme()->get('Verion'), true ); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_lightbox'); |
The above code should enqueue the lightbox. We can now use it in our theme.
Create a Gallery Block Style
Now, we need to create a block style for our Gallery block. You can read more about block styles in their official doc. Basically, block styles add a new class to the block which we can use to create an alternate style for the block.
To create our block style, we create a new file – block-styles.php inside inc folder in our theme directory. So right now, our file structure should look like this –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
assets js glightbox.min.js css glightbox.min.css inc block-styles.php functions.php styles.php .add some . . // other files |
Now, we need to add the block-styles.php file to functions.php. Add the following code at the bottom of the functions.php file –
|
1 2 3 |
require get_template_directory() . '/assets/block-styles.php'; |
After saving, block-styles.php is added to the theme but right now, it’s empty. Let’s add some code to create a block style for our Gallery block. Add the following code to block-styles.php –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php /** * Block Styles for Block Editor */ if ( !function_exists('my_theme_block_style') ) { function my_theme_block_style() { register_block_style( 'core/gallery', array( 'name' => 'lightbox', 'label' => __('Lightbox', 'my-theme'), 'style-handle' => 'my-theme-block-style' ) ); } add_action( 'init', 'my_theme_block_style' ); } |
Go ahead and save the file. If everything is okay, you should have a new block style for the Gallery block. You can check it out by adding a Gallery block in the inserter. It should appear in the Inspector sidebar. It should look like this –
As you can see, we have a new “Lightbox” block style. What this block style is doing is adding a class to the block. The class added is of the format is-style-{name} where name is the name of the block style we defined in block-styles.php. In our case, it would be is-style-lightbox . We can verify this by saving the Gallery block and inspecting it in the front-end. We would be able to see the class added –
We’ll use this class to add lightbox to our Gallery block.
Adding Custom JS file
Now, we need to initialize the lightbox. For that, we need to create a new JS file where we’ll add all our JS code to initialize the lightbox. Create a new file in assets folder and name it custom.js. To enqueue this file, go ahead and update the my_theme_enqueue_lightbox function we added in functions.php earlier –
|
1 2 3 4 5 6 7 8 9 |
function my_theme_enqueue_lightbox() { wp_enqueue_style( 'glightbox-css', esc_url(get_template_directory_uri() . '/assets/lightbox/glightbox.min.css'), array(), wp_get_theme()->get('Verion') ); wp_enqueue_script( 'glightbox-js', esc_url(get_template_directory_uri() . '/assets/lightbox/glightbox.min.js'), array(), wp_get_theme()->get('Verion'), true ); wp_enqueue_script( 'custom-js', esc_url(get_template_directory_uri() . '/assets/custom.js'), array('lightbox-js'), wp_get_theme()->get('Verion'), true ); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_lightbox'); |
IIn the above code, we enqueued the custom.js file. Note that we added lightbox-js as a dependency to ensure custom.js loads after lightbox.min.js. This is required if we want to initialize the lightbox in custom.js.
Creating HTML Markup
Now comes the fun part. We add the code to initialize the lightbox. If you take a look at GLightbox documentation, the markup for a gallery lightbox is something like this –
|
1 2 3 4 5 6 7 8 9 |
<!-- Gallery --> <a href="large.jpg" class="glightbox3" data-gallery="gallery1"> <img src="small.jpg" alt="image" /> </a> <a href="video.mp4" class="glightbox3" data-gallery="gallery1"> <img src="small.jpg" alt="image" /> </a> |
There are a couple of things to note here. First, the images are wrapped in anchor tag linking to the large version of the image. Also, all anchor tags have the same class name and data-gallery attribute.
Now, let’s take a look at our gallery block. The markup of images in a gallery block with 3 iumages added looks like this –
Here, we need to add the anchor tag. We can do that by changing the “Link to” setting in the Gallery Block to “Media File” –
Now, the markup of images in the Gallery block changes. We now have the anchor tags in the markup –
We can use this to initialize our lightbox.
Initializing the Lightbox
To initialize the lightbox, add the following code to custom.js file –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const Lightbox = () => { const selectors = document.querySelectorAll('.is-style-lightbox'); if (selectors.length === 0) { return; } selectors.forEach(() => { const lightbox = GLightbox({ selector: '.is-style-lightbox a', touchNavigation: true, keyboardNavigation: true, width: "auto", height: "auto", draggable: false, }); }); } Lightbox(); |
Let’s go through the above code.
- We define a Lightbox function to add all the code in.
- In the function, we first select all the instances of gallery block with lightbox style enabled by targeting the .is-style-lightbox class.
- Then, we perform a validation check and return if there are no instances of Gallery block.
- Now, we loop through all the instances of gallery block with lightbox style enabled and initializing lightbox for every one of them. You can learn more about initializing GLightbox and the different arguments we can provide in their official documentation.
- We invoke the Lightbox function at the end.
If everything is correct, the lightboxes should now be initialized for every instance of the Gallery Block and enabled at the front-end of your post or page.
Note that this is the basic implementation and add further customizations by modifying the above code. It’s up to your requirement and creativity.
Conclusion
So that was it! In this article, we learnt how to add lightbox to a Gallery Block in WordPress. We used Glightbox here but you can use any library you want.
Hope you got to learn something new in this article. You can also check out our blog where we regularly share more insightful content related to WordPress and Web Development. See you in the next article!
