How to create a WordPress image gallery with thumbnails

Many WordPress users don’t know that they can take advantage of plugins with powerful features that allow them to have complete control over galleries. Lucky for you, we prepared a straightforward tutorial on how to create an image gallery with thumbnails by using the WordPress editor (also known as the Gutenberg Block Editor) as well as a gallery plugin.


In this article, we will show you:

  • a comparison between the WordPress core gallery and Modula;
  • how you can add thumbnails with the default WordPress gallery;
  • steps to follow when creating an image gallery with thumbnails;
  • alternative solutions to create a WordPress thumbnail gallery;
  • and much more.


Thumbnail galleries are one of the most used solutions on the web for displaying multiple images because they don’t take up so much space, allow quick browsing and closer inspection when needed. So, suppose you are a WordPress user looking to create image galleries with thumbnails. In that case, you have two options: the Gutenberg Block Editor (no-thrills, no-frills easy on the budget solution) or a gallery plugin (more features).

ToolThumbnail galleryOpen images in a LightboxThumbnails at bottomKeyboard navigationVertical/horizontal scrolling for thumbnailsInsert external link
Gutenberg Block Editor
Modula

Depending on your needs, you can see what you’ll get for the thumbnail gallery with each solution in the above table. Both WordPress editor and Modula allow you to create a thumbnail gallery and open images in a Lightbox (the window that opens when you click on an image and appears in its entirety) – the only downside here is that you can’t customize your Lightbox with the default WordPress gallery.

Of course, you can choose a Lightbox plugin that works great with the WordPress editor, but if you will need to install more plugins that are not made by the same developer, they may not work seamlessly together and you will end up with broken galleries. Moreover, you won’t benefit from support and updates, as you benefit from a commercial solution like Modula.

While useful for basic galleries, the default WordPress gallery can be quite limited compared to other full-blown plugins. Here are just a few of the things that the native WordPress gallery can’t do:

  • you can’t allow people to navigate through your thumbnails with the keyboard – they’ll have to close and then open one image at a time, a problem that might frustrate your users and make them leave your site,
  • you can’t place thumbnails at the bottom of the Lightbox – this will make it difficult to navigate through thumbnails, and the user experience can be affected,
  • it doesn’t offer a thumbnail axis – if you don’t allow people to scroll through thumbnails, they can’t reach all your images or find what they’re looking for;
  • you can’t add external links to images – in some cases, you’ll want to link thumbnails in your gallery to external URLs.

If you are still not sure which tool suits you best, let’s see how they work.


Let’s say you’re an interior design photographer, or you help people decorate their houses and want to create a page with some interior design images to show people your portfolio. Go to your WordPress dashboard > Pages > Add New. We’ll create a new page on your website with your pictures.

create a new page
Add a new page

I’ll give a name to my page, then click on the “+” icon and add the Gallery block.

Create a gallery
Add a gallery

Now, you need to upload your images or, if you already have them uploaded on WordPress, you can add them from your Media Library.

Add images to your gallery
Upload images

Once you’ve uploaded your pictures, let’s create an image gallery with thumbnails. In the right sidebar, you’ll see some gallery settings. Go to Image size and set Thumbnail. Next, make sure you select how many images to display per column (I added 8 images, but you can add as many as you want).

In the last part, you must link your images to the media file or an attachment page (if you don’t do so, people won’t be able to click on a picture and see it in its entirety).

customize your gallery
Customize your gallery with thumbnails

So, this is how you can create an image gallery with thumbnails with the default WordPress editor. Once you’ve set up your gallery, click Publish, and your thumbnail gallery is live.

The thumbnail gallery created with the Gutenberg Block Editor

Before creating our WordPress thumbnail gallery, you need to install and activate Modula – the process is super easy and will take less than 1 minute.


Every time from now on, when you want to create an image gallery, click on Modula icon, and then press Add new.

Create your galleries with Modula
Create your first gallery

Now, you can start by adding a descriptive title to your WordPress thumbnail gallery and uploading your images. If you already have your images uploaded in WordPress, you can also select them from your Library.

upload images
Add title and upload image files

Thanks to Modula’s drag-and-drop interface, you can arrange images in your galleries according to your preferences. 

organize your pictures
Arrange your pictures

The most fantastic thing you can do with your galleries is to add a gallery type. How? Scroll down and go to General Settings. In the gallery type, you can choose to add a gallery with custom grids, a gallery with columns, a slider, or a creative gallery.

choose a gallery type
Select a gallery type

Next, let’s change the image size. In the same section, click on the Image Size dropdown box and click on Thumbnail.

add image size
Thumbnail image size

After you have set up your images’ size, go to Lightbox and Links. Here you can choose to open your image gallery in a beautiful Lightbox.

allow to open images in a Lightbox
Open images in a Lightbox

Modula plugin also allows you to customize the thumbnail display. Scrolling down the page, you will find the thumbnail settings.

What can you do in this section?

  • Add the thumbnails button in the Lightbox toolbar;
  • Auto start thumbnails – display thumbnails on lightbox opening;
  • Thumb axis – select vertical or horizontal scrolling for thumbnails;
  • Thumbnails at the bottom – place the thumbnails at the bottom of the lightbox;
Add thumbnails to your image gallery
Thumbnails settings

You can also add close/open animation, transition effect, and many other dynamic effects.

Add thumbnail galleries to your website today!

Modern thumbnail gallery solution for everyday use.

Get Started Now

If you need to add external links to your thumbnails, here’s an article on how to add links to images.


Once you have customized your thumbnail gallery, don’t forget to click on Save Gallery. You don’t want to lose all changes and start over.

save gallery
Save your gallery

After you save your WordPress thumbnail gallery, Modula will generate a shortcode for your gallery.

gallery shortcode
Thumbnail gallery shortcode

All you have to do now is to copy the shortcode and paste it into your page.

paste the shortcode
Add Modula gallery to page

Click Publish and let’s take a look at Modula thumbnail gallery.

Thumbnail gallery created with Modula

Final thoughts

If you want to create basic galleries, you can go with the WordPress default gallery. But if you want to improve the user experience, streamline the navigation process, and create visually appealing galleries, Modula is a better solution. Not only can you display thumbnail image galleries, but you can also have complete control over the appearance of your galleries.

All you need to do is:

  1. Create a new gallery and set the thumbnail image size
  2. Allow images to open in a Lightbox with thumbnails at the bottom, add a thumbnail axis, and a keyboard navigation
  3. Add the image gallery with thumbnails to your website.

You can make use of all of these functionalities by getting the Starter Pricing Plan.

Ben
Ben

Ben loves creating content that helps people get the most out of WordPress. Whether it’s how-to’s, reviews, and in-depth guides. His mission is to make things easier and bridge the gap for non-technical folks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Start Building Great WordPress Galleries Now

Fast, Mobile Optimised, and Pixel-Perfect Galleries... What are you waiting for?