Building a Custom Image Gallery with the Image Gallery Block

Recently, I started a project that required me to create a large image gallery. If you’ve worked with the WordPress block editor for a while, you’ve probably noticed that the default WordPress Gallery block leaves a lot to be desired. On top of that, GenerateBlocks doesn’t include a gallery block at all.

While there are other block packages, like Cadence, that offer image gallery functionality, I didn’t want to install an entirely new builder just for one block. In the past, I’ve faked image galleries by creating grid layouts and manually adding images, but that approach wasn’t ideal—and it definitely wasn’t going to work for this new project.

So, I went searching for a better solution and found a plugin that does exactly what I need. It’s called the Image Gallery Block by WP Developer. In this post, I’ll walk you through how to install and use this plugin, as well as how to style your gallery to fit your project.

Installing the Image Gallery Block

To get started, you’ll need to install the plugin.

1. Go to the Plugins section in your WordPress dashboard and click Add New.
2. Search for “Image Gallery Block“
3. Look for the plugin created by WP Developer.

Even though this plugin hasn’t been updated in six months and only has around 3,000 active installations, WP Developer is a reputable company that has created other products, including add-ons for Elementor. Knowing their track record gave me confidence in using this plugin.

Once you’ve found the plugin, click Install Now and then Activate. There’s no additional configuration required—you can start using it right away.

Adding an Image Gallery

After activating the plugin, you can add your first image gallery.

1. Create or open a page where you want the gallery to appear.
2. Add a blank section with an inner container.
3. Click the + button and search for “Image Gallery.”
4. Select the colorful icon for the Image Gallery block and insert it into your page.

At this point, you’ll have the option to upload images or select them from your media library. If your images are already uploaded, choose the Media Library option.

To select multiple images, click the first image, hold Shift, and click the last image in the range. Then, click Create a New Gallery. On the edit gallery page, you can add captions to your images if needed. Once you’re done, click Insert Gallery to add it to your page.

Styling the Image Gallery

With the gallery block selected, you’ll see a variety of controls on the right-hand side. Let’s go through the key settings to customize your gallery.

General Settings

1. Layout:
   • The default layout is a grid, which crops images to fit uniform sizes.
   • Alternatively, you can choose a masonry layout, which preserves the original aspect ratio of your images.
2. Styles:
   • Options include black-and-white images that turn to color on hover or a color overlay effect.
   • I didn’t need these for my project, but they’re available if you want to use them.
3. Captions:
   • You can display captions directly or only on hover.
   • I opted for the hover effect, which hides captions until the user hovers over an image.
4. Image Size:
   • Choose from default, thumbnail, medium, large, or full-size options.
5. Responsive Columns:
   • One of the standout features of this plugin is the ability to set the number of columns for different device sizes.
   • For example, you can have four columns on desktop, three on tablet, and two on mobile.
6. Gap Between Images:
   • Adjust the spacing between images using pixel values.
7. Lightbox:
   • By default, images open in a lightbox when clicked. You can disable this if you prefer, but I left it enabled for my gallery.
8. Filters:
   • Enable filters to add category buttons at the top of your gallery.
   • You can tag images with categories and allow users to filter them.
   • While this feature is useful, I didn’t need it for my project, so I disabled it.

Style Settings

The Style tab lets you customize the appearance of your gallery.

1. Borders:
   • Add borders to your images in normal or hover states.
   • Customize the border style, color, width, and radius.
2. Border Radius:
   • I didn’t use borders, but I added a border radius of 24 pixels to give the images rounded corners.
3. Caption Styles:
   • Adjust text color, background color, typography, and alignment.
   • I made the text color darker for better readability and increased the opacity of the background color to make captions easier to read.
   • You can also set the caption width to 100% of the image and align the text to the center, left, or right.
4. Vertical Alignment:
   • Position captions at the top, middle, or bottom of the image. I chose the bottom for my gallery.
5. Margin and Padding:
   • Fine-tune the spacing around captions for desktop, tablet, and mobile views.

Advanced Settings

The Advanced tab provides additional controls for the entire gallery wrapper.

1. Margin and Padding:
   • Adjust spacing for the gallery as a whole.
2. Backgrounds:
   • Add background colors, images, or gradients to the gallery wrapper.
3. Animations:
   • Apply animations to the gallery, such as fading in or sliding up.
   • While these options are available, I found them a bit cheesy and left them disabled.
4. Custom CSS:
   • Add custom CSS directly within the block settings for further customization.

Previewing the Gallery

Once you’ve styled your gallery, update the page and preview it on the front end.

Hovering over an image will display the caption, and clicking an image will open it in a lightbox. The lightbox includes features like fullscreen mode, navigation arrows, and the ability to close it with the X button or the Escape key.

Wrapping Up

I doubt GenerateBlocks will ever add an image gallery block, so I’m glad to have found this solution. The Image Gallery Block by WP Developer offers the functionality I needed without requiring a full builder package.

If you’ve used this plugin or other gallery blocks in the past, I’d love to hear your thoughts. This plugin worked perfectly for my project, and I’m excited to see how it performs in future builds.

Let me know if you’ve tried it or have other recommendations for gallery plugins!