Whether you’re a photographer, artist, or someone who just wants to display some images in an interesting fashion, online galleries are the tool of choice. In this guide on how to create a gallery in WordPress, we’ll look at two easy methods:
- How to create a gallery in WordPress without a plugin
- How to create an enhanced image gallery with Otter Blocks
But first, let’s talk about how they can help you display your images in a more dynamic way on your WordPress site.
Why should you use a gallery to display images?
By default, the WordPress Gutenberg editor displays individually uploaded images in a vertical stack, like the images beside this paragraph (or below if you’re viewing this on a mobile device).
This makes sense in a regular blog post, where images have text between them.
In a gallery, however, you want to display images side by side. This allows users to view more images at one time and can help you differentiate your gallery from other areas of your site.
To get this side-by-side display, you have two options. The first is to manually set up columns, then add image blocks to each column. This can be an enormously tedious process if you’re adding a lot of images to the page you’re working on.
The other option is to learn how to create a gallery in WordPress. This is far easier than the first option. It also gives you more ability to customize how your images are displayed.
Let’s take a look at how it works!
How to create a gallery in WordPress without a plugin
Don’t want to install anything new on your website? You’ll be glad to hear that the WordPress Gutenberg editor offers a built-in gallery block. You can add it to any page or post by opening the block menu and searching for Gallery:
Click on the block to add it.
You can then add images in three ways:
- Drag-and-drop files from a folder on your computer
- Upload files from your computer (hold the CTRL key for Windows, or Command key for Mac, to select multiple files at once)
- Find files in your Media Library (click on as many images as you want)
If you’re pulling images from the Media Library, click Create a new gallery. You’ll then be given the option to add captions to all of your images before you put them into the gallery:
Once you’ve uploaded some images, click on the space between them to see customization options for your gallery in the sidebar. The default gallery block allows you to specify a number of columns. It also lets you set up image cropping, decide where the images will link to, and choose the size of each image. In addition, you can use it to pick a background color for your gallery.
If you opt for more than two columns, and you have an unequal number of images in each row, you’ll notice that the images in the top row are smaller than the image(s) on the bottom. You can’t change this setting, but you can move an image to the bottom of the grid. To do this, simply click on it and press the arrow buttons that appear above it. This allows you to select which image is the largest.
Next, click on an image within the gallery to set a caption for it.
You can also add alt text describing the image in the sidebar. This alt text will make it easier for search engines to identify what your content is about. Alt text also makes your content more accessible to users who are visually impaired, especially those who use screen readers.
You can also add a caption for the entire gallery at the bottom of the block. This can help you explain what ties all of your images together, give credit to the creator, or otherwise give your audience more information about the content of your gallery.
And voila, you’ve created your very first WordPress gallery! However, there are some limitations to this gallery option. Most notably, you can’t control the spacing between the images. If you want to gain this level of control, you’ll need to create a gallery in WordPress with Otter instead.
Here’s our quick guide on how to do just that:
How to create a gallery in WordPress with Otter
Want to experiment with different layout options for your gallery? Gain access to advanced customization options?
Otter is here to help! This plugin gives you access to several blocks not found in the regular Gutenberg editor. These include things like icons, maps, and countdowns, which you can add to your content. You’ll also get access to new ways of displaying your content, including a slider block and, most notably for our purposes, the Masonry Gallery block.
Otter is a free plugin that you can add to your WordPress site by going to Plugins > Add New and searching for Otter in the plugin directory. Click Install, then Activate, and you’re ready to go.
Want to learn more about Otter? Check out our full Otter Review.
With Otter installed on your website, you can add a Masonry Gallery to any post or page in just a few steps:
- Step one: add gallery
- Step two: add images
- Step three: customize your gallery
- Step four: add captions and alt text
- Step five: publish
Step one: add gallery
Open the page or post you want to add your gallery to and click the + icon next to any section of the page. Then type Masonry into the search. Click on the block to add it to your page.
Step two: add images
With the block in place, you’ll have three options for adding your images: drag-and-drop from a folder on your computer, upload from your File Manager, or add from your Media Library. If uploading from your computer, hold CTRL to select multiple files (Command for Mac). If you’re adding images from the Media Library, you can click on as many images as you want, and they’ll all be uploaded.
Step three: customize your gallery
The next step in learning how to create a gallery in WordPress is to customize its appearance.
Click on the space between images to open customization options in the sidebar. You’ll notice that many of these options are the same as before: number of columns, image cropping and linking, and image size. However, there are also two new options:
- Masonry. This allows you to control the size of the margins between photos, controlling the overall appearance of your gallery. Keep in mind, margin changes aren’t reflected on the backend; you must preview or publish the post to see them on the frontend.
- Block tools. You can use these tools to add animations to your gallery. You can also add custom CSS to completely customize its appearance, and transform it into a sticky so that it follows users as they scroll down your page. In addition, you’re able to set up Visibility Conditions to control who sees your gallery and when they see it.
Step four: add captions and alt text
If you haven’t already added captions, this is the stage where you’ll want to add them. You can add captions to individual images by clicking on them and writing into the space provided.
Clicking on an image will also open the alt text customization tool in the sidebar. Again, you want to make sure that your alt text describes your images so that both visually impaired users and search engines can better understand your content. For best effect, you want to look for a natural way to include the focus keyword for the page you’re using into some or all of your image alt text.
You’ll also find an area where you can add a caption for the gallery as a whole at the bottom of the block.
Step five: publish
Now you’re ready to share your gallery with the world! Make sure you’re happy with the other content on your page, then click the Publish button in the top right corner of the WordPress editor.
Final thoughts on how to create a gallery in WordPress
There are many reasons to create a WordPress gallery. You can use it to showcase your photography or design work. You can also share collections of images from events you’ve hosted or attended, or add images of your team at work to your “About” page, and much more.
These powerful image display tools are also quite easy to set up. You can create a basic gallery in just a few clicks with the regular WordPress editor, or add Otter Blocks to your website to gain access to advanced customization options. Either way, you’ll end up with a beautiful display of your images to share with the world.
Want to learn more about how to use WordPress? Check out our ultimate guide to building a WordPress site!
Don’t forget to join our crash course on speeding up your WordPress site. Learn more below: