Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

How to Create an Image Gallery with Thumbnails in WordPress

How to Create an Image Gallery with Thumbnails in WordPress

by Waseem Abbas on Jan 26, 2016

Share This Post!

Do you want to create an image gallery in WordPress? You can do it in less than 5 minutes without writing a single line of code. In this article, we will show you how to create an image gallery with thumbnails in WordPress.

Create An Image Gallery With Thumbnails

To create an image gallery in WordPress, the first thing you need to do is purchase the Envira Gallery plugin. After purchasing the plugin, you need to install and activate it.

After you’ve activated it, you will find Envira Gallery in your WordPress admin menu.

You can create a new image gallery by going to Envira Gallery ยป Add New.

Add New Gallery

A new window will open to create a photo gallery in WordPress.

Let’s start by adding the Title for your image gallery.

New Gallery

Next, add some photos to your image gallery.

You can either drag and drop new images into the Native Envira Gallery section, or choose from your previously uploaded photos by clicking on the Select Files from Other Sources button.

Add Photos

Make sure to click on the Insert into Gallery button. Your photos will now appear in the Images section.

Images

After adding the images, you can rearrange them by simply dragging and dropping them to the position you want.

We recommend that you add meta data to all your photos. You can do that by clicking on the ‘Pencil’ icon.

Modify Image

You can add a Title, Caption, Alt Text and more. Once you are done, hit the Save Metadata button.

Repeat this process with your other images. You can do this easily by clicking on the “>”(next) icon in the upper right-hand corner of the dialog box.

Next Photo

After adding the meta information to your photos, check the Config settings for your image gallery. This allows you to customize how your image gallery will display on your website.

You can change the Number of Gallery Columns, Gallery Theme, Image Description Settings, Column Gutter Width and more.

Configuration Settings

Next you will find the Lightbox tab. By default, it is enabled. You can change the Gallery Lightbox Theme, Image Size, Caption Position, and more.

Lightbox Settings

In the bottom of the Lightbox setting, you will find the Gallery Thumbnails settings. Image thumbnails are enabled by default (you’ll need this to create an image gallery with thumbnails).

You also have the option to adjust the Width, Height, and Position of thumbnails.

Thumbnails Settings

Envira has the option to display a responsive image gallery with thumbnails. You may enable or disable Mobile configuration, and adjust the settings to get the exact results you want.

Mobile Settings

The Misc tab allows you to edit your Gallery Title, Slug, add Custom CSS and more.

Misc Settings

Once everything is done, you need to click on the Publish button.

Upon publishing the gallery, a new widget called Envira Gallery Code will show up on the right-hand side of the screen with a shortcode, template tag and some other useful information. Use the shortcode to add your image gallery to the post or page of your choice.

Shortcode Information

You’ll need to copy the shortcode from the widget.

Then, edit the page or post where you want to add your image gallery, and simply paste the shortcode into the editor.

Paste Shortcode

After adding the shortcode, go ahead and click on the Update button to save your changes.

That’s all. This is how your image gallery with thumbnails will look on your website:

My Gallery View

(Note: In this example, we used the default Twenty Sixteen WordPress theme.)

We hope this article helped you to learn how to create an image gallery with thumbnails in WordPress. You may also want to check out our guide on how to create an image slider for your WordPress galleries.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Share This Post!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.