Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

How to Create a Responsive Image Gallery Grid in WordPress

by Brenda Barron on Jul 9, 2018

Photographers have extra challenges to face when launching a WordPress website. Not only do you need to make sure that your site is easy to use, immersive, and engaging, but you need to do everything you can to make it look incredible too.

Unfortunately, the responsive image gallery options that come built-in with WordPress leave much to be desired, which means that you need to go hunting through over 3,000 “gallery” plugins on WordPress just to find something that might work. The good news is that we’re here to simplify things. In this article, we’re going to look at a few great image gallery plugins you can use (aside from Envira). Then we’ll give a quick rundown of how you can create a responsive image gallery grid using the Envira gallery.

A collection of scenic night skies arranged in an image gallery

The Top Plugins for Creating a Responsive Image Gallery

If you want to create a responsive image gallery grid with very little effort, then we have to recommend Envira. Envira comes with a stunning interface that makes it easy for you to get up and running. Plus, aside from an easy way to create galleries, Envira also comes with watermarking, albums, video support, and social sharing.

Of course, there are other options out there too. Here are some of our favorites.

1.     Modula

Modula is a WordPress image gallery grid plugin that helps you to create attractive galleries without any need for specialized customization. Simply set a height, width, and minimum image size for your visuals, and the result is a stunningly responsive gallery. Modula comes packed full of extra features like pre-built hover effects, style controls for your radius, shadows, and margins, and gallery filters. There are social sharing tools available as well.

Modula banner, with logo and text overlaying an example gallery

2.     NextGEN Gallery

Another option for those in search of a responsive image gallery grid is the “NextGEN Gallery” plugin. NextGEN gallery is one of the most popular plugins on WordPress for photographers and image enthusiasts, but it’s had a few problems along the way. Of course, NextGEN is a free plugin, so you could argue that you get what you pay for. The NextGEN gallery comes with a range of different gallery types to choose from, as well as the option to upgrade with premium features like image protection and deep linking.

A large gallery displayed on a monitor at a neat desk, with a picture of the NextGEN Gallery back end off to the side

3.     Jetpack

Jetpack is a multi-purpose visual plugin that brings together a variety of WordPress features. One of those great features is enhancements to the core gallery in WordPress. Although the Jetpack gallery isn’t as heavy-duty as the other options on this list, it’s a great option for creating basic galleries if you already like using Jetpack on your site.

The Jetpack banner, with two people looking at a laptop with symbols above it

4.     Photo Gallery by Supsystic

Like many of the plugins we’ve covered so far, Photo Gallery by Supsytic uses the freemium model to offer a basic set of features, supplemented by additional options hidden behind the PRO version. With this tool, you can create all the photo galleries you need using a range of templates. You can then customize those galleries with a selection of borders, shadows, and margins.

If you need to import your images in bulk or from social networks, there are plenty of cool features on Supsystic to help add images from Facebook, Instagram, and more.

A drawing of a man sitting at a laptop surrounded in various image and media devices

5.     FooGallery

FooGallery is a freemium photo plugin that helps with creating attractive, responsive image gallery grid designs for WordPress. There’s a range of layouts to choose from, and all the galleries you create are designed to be visually-attractive by default, so you don’t need to do a lot of editing yourself. In both the free and premium version, you can enjoy a host of gallery templates, image hover effects, infinite scrolling options, and more.

An example Foo Gallery, showing pictures of various cityscapes

Creating a Responsive Image Gallery Grid with Envira

Now that we’ve covered some alternative options for your responsive image gallery grid, let’s get back to Envira, and how you can design your galleries using our app.

If you run a portfolio or photography site, then you’ll know how difficult it can be to create an image gallery with WordPress alone. Usually, the result is a lack of site speed, problems with organization, and more. Fortunately, Envira makes setting up image galleries simple with its responsive design, slideshow functionality, lightbox support, and more.

Here’s how you can add a responsive image gallery grid to your website with Envira.

Install Envira Gallery

The first step is installing Envira Gallery. This part is incredibly easy. Just head to the Envira Gallery home page and click on the “Get Envira Now” button. Once you’ve got your plugin, you can install and activate it by going into your WordPress plugins, searching for Envira, and setting it up from there.

Once activated, it will add a new menu item to your sidebar called “Envira Gallery.” You’ll need to go into that space and click on “Add New.”

Envira Gallery back end, showing the add new button

Adding Images to Your Responsive Image Gallery Grid

Next up is adding images. You can either upload photos from your computer or pull them straight from an existing WordPress gallery – whichever is easier. Just select the images you want, and you’ll see the thumbnails popping up in your gallery. You can click on the images to set details like titles and alt tags. Envira also allows you to put HTML in your image title.

Envira Gallery back end, showing the add files buttons inside a WordPress post

With your images selected, you can drag and drop them into the order that you want them to appear in your responsive image gallery grid. For instance, if you’re showing off a wedding portfolio, you might start with a picture of the rings, then move through to images of the cakes.

Configure Your Gallery

When you’re happy with the images you’ve selected, and you’ve finished editing your metadata for SEO, click the “Config” tab. Here you can change how your responsive image gallery grid appears on WordPress. There’s a range of options to choose from, including lazy loading, number of gallery columns, and more.

The Envira Gallery back end, showing the selected Config tab and some of the option contained within

You can also click on the “Lightbox” tab to change how the image gallery looks on your website. For instance, you can choose your caption positions or image sizes, and basic lightbox themes too.

Remember to scroll to the bottom of the lightbox tab to configure how thumbnails behave on your grid. You can choose whether people can click on your thumbnails, and how big they should be on the page.

Embed or Publish Your Gallery

Finally, you’ll be ready to publish your responsive image gallery grid. You can simply hit the publish button to make the gallery available. Then, use the shortcodes available from Envira to embed your gallery into a post or page.

Example Envira Gallery shortcodes put into a WordPress post

And there you have it, everything you need to know to set up your own responsive image gallery grid in WordPress. If you enjoyed this guide, follow us on Twitter or Facebook to find out more about making the most out of WordPress.

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.