How to Create an Image Gallery in WordPress

WordPress makes it incredibly simple to add an image gallery anywhere on your site, but many site owners fail to take advantage of this powerful feature.

In this article, we’ll take you through adding an image gallery, incorporating a slideshow and attractive tiling, and highlight some useful gallery plugins.

Image Galleries and WordPress

Image galleries have been around in WordPress since all the way back in 2008 with WordPress 2.5. Version 2.5 was a landmark release in many ways, and the simultaneous unveiling of shortcodes and galleries was enthusiastically greeted by users. Matt Mullenweg was just one of many who highlighted the functionality on his personal blog.

An early gallery from Matt Mullenweg
Matt Mullenweg was an early gallery enthusiast.

Development thereafter was relatively low-key, with the major changes over the intervening seven years being the overhaul of the media uploader in WordPress 3.5 and further improvements in version 3.9. With the introduction of responsive images in WordPress 4.4, images are very much back on the agenda, so it’s a good time to review the basics of setting up an image gallery.

Before we create our gallery, it’s worth pointing out some standard Codex references relating to image galleries so you have them available for reference:

  • Inserting media into posts and pages: The basics of uploading images are nicely covered in the Codex.
  • Media library: If you’re not familiar with the basics of the Media Library, now is as good a time as any to review them.
  • The WordPress Gallery: This dedicated Codex page will take you through the basics of galleries in WordPress.

With those introductions out of the way, let’s crack on with making our own image gallery.

How to Create a Basic Image Gallery

In this walkthrough we’ll be stepping through adding a simple image gallery to a local site, look at editing existing galleries, and then add a little further visual pizazz via Jetpack. We’ll also draw your attention to some of the leading gallery plugins you can use to expand the basic functionality on offer.

We’re using a local install of WordPress 4.4 and taking the new Twenty Sixteen theme for a spin. We’ll be looking at adding some attractive pictures of owls to our site – sourced from the fantastic resource that is Pixabay – because, let’s face it, there’s something fundamentally awesome about owls.

Here’s a snapshot of the page I’d like to spice up with some high-quality imagery – as you can see, it’s pretty bland right now.

Owl blog post without pictures
Not much to grab the eye in our current owl blog post.

We’ll kick things off by moving into the admin, selecting our post, picking an insertion point and then clicking the Add Media button in the toolbar.

Adding media to a gallery
Choose your insertion point and select Add Media.

We’re adding a gallery to a post here, but you’re free to add galleries on both posts and pages. You can select anywhere in your content area to insert – we’ve added a new line above to make the insertion point clear. Clicking the Add Media button kicks you into the Media Uploader interface and Create Gallery is, unsurprisingly, the option to go for here.

As you can see in the screenshot below, selecting this option gives you the possibility to either upload entirely new images or select from items that are already in the Media Library. You’re free to toggle between adding images and selecting existing images, and you can add images one at a time or drag multiple images into the window.

Uploading pictures to a gallery
We’ve uploaded six owl pics to our gallery. The top-left owl looks super happy (or tired…I’m not sure which one).

In our case above, we’ve got six rather excellent owl pictures uploaded. As you can see, a simple tick mark indicates which ones are included, and a blue tick indicates if you are currently editing the attachment details of that picture.

Clicking the Create a new gallery button bumps us into the Edit Gallery dialog where we can review basic options for how our pictures will be displayed. These can all be overridden at a later date, but it’s handy being able to tweak things at this stage.

Edit gallery options
The Edit Gallery dialog gives us some basic display options to choose from.

There are two main items you can tweak at this stage: image ordering and overall gallery settings. Ordering is easily achieved by either dragging and dropping to your heart’s content, or simply clicking the Reverse order button if that’s all you need.

When it comes to Gallery Settings you have four options to play with:

  1. Link to: Choose from the standard options of None, Media File, and Attachment Page.
  2. Columns: Three columns is the default setting here.
  3. Random order: You can opt to have images appear in a random order.
  4. Size: Choose from the standard options of Thumbnail, Medium, Large and Full Size.

Once we’ve made our initial selections, clicking on Insert gallery pops us back into the editor where we can see our collections of owls in all their feathery glory.

View of gallery after being inserted in the editor
Boom – our gallery is successfully inserted in the page.

A quick click of the Preview button shows us that everything is showing up nicely on the front end as well.

Owl gallery displaying on the front end.
Our gallery of owls displaying on the front end.

In terms of the basics of adding a gallery, it’s pretty much as simple as the steps outlined above. You should be able to add a basic gallery to any page or post on your site literally within minutes.

You’re also free to add one or more image galleries directly to your posts and pages via shortcode. Consult the Codex Gallery Shortcode page for full details of syntax and options.

Things are fine and dandy as they stand in our example, but what if we want to make some changes? For example, at the moment clicking on our feathered friends will do nothing as the Link to option is set to none – it’d be nice to have a slideshow effect in here somehow if possible.

The pictures could also probably do with some captions while we’re at it and a two column layout might give them a little more room to breathe on the page. Looks like it’s time to cover options for editing our gallery.

How to Edit Your Image Gallery

Things couldn’t be easier here – simply click on your gallery in the post editor and you’ll see two buttons that enable you to either delete the gallery or pop back into the editing screen we were in earlier.

Edit galleries button
Simply click on your gallery to get to editing options.

In our case, we’ve changed to a two column layout, bumped the image size up to Medium, and added some appropriate captions to identify our individual owls.

Two column gallery layout
Switching to a two column gallery layout.

There’s an immediate problem here, though. Our nice symmetric thumbnail grid is gone for starters. Plus, we’re still not able to see our owls in all their glory via a slideshow of some sort. Let’s look at a simple way of fixing both those problems.

Adding a Tiled Gallery and Simple Slideshow with Jetpack.

A brief note before we go further: We’ll be using the Jetpack plugin to fancy up our gallery here, but there are many other ways of going about this. Some people may have bloat-related concerns about Jetpack, so bear in mind it’s far from the only option. Either of the gallery plugins we’ll list later should be able to help you accomplish the same goals (and a lot more besides).

We’re using Jetpack in a local environment so we need to run it in Development Mode by adding a simple setting to wp-config.php as explained in the Jetpack documentation.

Jetpack running in Development Mode
A small change to wp-config.php lets us run Jetpack locally in Development Mode.

After you’ve installed Jetpack and edited wp-config.php, click Jetpack in the admin side menu and you should see a message confirming that you’re running in Development Mode as pictured above.

From here, scroll down the page and click on the button that says See the other 27 Jetpack features. You should now be looking at a list of potential Jetpack modules you can use. Scroll down the page a little and you should see the Tiled Galleries option available. Hover over this and you’ll see an option to activate the functionality appear.

Activate tiled galleries
Hover over Tiled Galleries to reveal the Activate button.

After you’ve clicked Activate, hover over Tiled Galleries again and you should see an option to configure the new functionality.

Configure Tiled Galleries
Click on Configure to turn on fancy tiling.

This takes you directly to Settings > Media where you’ll see a new checkbox option called Tiled Galleries.

Choose tiled galleries
Select Tiled Galleries as an option.

After enabling, if we return to a preview of our feathered friends, things should be looking a lot tidier now – the larger versions of the images are still being used, but everything is now neatly organized in a tiled grid.

Tiled gallery of owl pictures.

Things are looking a lot better already. If you pop back in to edit your gallery at this stage, you’ll see that you now also have the option of selecting from several different gallery types.

Gallery type options
Select between different types of gallery.

We’ve covered a lot of ground and all that remains now is to really set our owls free by enabling the Carousel option in Jetpack – a slick, full-screen photo browsing experience. We’re looking at the same series of activation steps as before with Tiled Galleries. Return to your list of Jetpack modules, activate

We’re looking at the same series of activation steps as before with Tiled Galleries. Return to your list of Jetpack modules, activate Carousel and hit Configure.

Activate and configure Carousel
Activate Carousel as you did with Tiled Galleries.

Once again, were kicked back into Settings > Media and this time, you’ll notice a new option called Image Gallery Carousel. The options here are pretty straightforward – you can switch the functionality on or off, choose whether to show Exif data and select between black or white as your slideshow background.

Activate Image Carousel

This time around when we preview our post, clicking on any of the images in the gallery pops up a slick-looking, fully functional slideshow that showcases our images in the best possible light and enables easy navigation between them.

Gallery slideshow detail
The Carousel module enables us to view images in detail and navigate easily between them.

As we mentioned earlier, using Jetpack is just one way to build on WordPress’ native gallery functionality in this manner. If you’re looking for another simple way of performing something similar without Jetpack, check out BobWP’s quick guide to using the Gallery Carousel without Jetpack plugin.

Quality Image Gallery Plugins

We’ve covered image gallery plugins in some depth before recently on the blog so we won’t go over too much old ground here. If you’re looking for functionality that the default gallery options or Jetpack can’t quite handle, start your search with either of these two heavyweight gallery plugins.

  • 1. NextGEN Gallery

    nextgen-gallery

    When it comes to fully featured WordPress gallery plugins, it’s hard to look past NextGEN Gallery. With well over a million active installs and a long track record behind it, it’s been the leading gallery plugin for quite some time now.

    The free version of the plugin gives you beautiful responsive design, a selection of built-in lightboxes and slideshow options, the ability to add entire albums of galleries to your site, and a host of other features.

    Kick things up to the premium NextGEN Plus or NextGEN Pro versions and you start getting into seriously sophisticated options more suitable to professional photographers such as integrated e-commerce, image proofing, image protection and the ability to sell digital downloads. Full pricing details for the two premium packages are available on the NextGEN site.

  • 2. FooGallery

    foogallery-plugin

    FooGallery advertises itself as being simple for users and highly flexible for developers and delivers on both counts. The free version of the plugin gives you slick options for ordering your images, lightbox support, gallery templates, and the ability to import from NextGEN galleries.

    Video galleries can also be integrated via the premium FooVideo plugin which enables you to add Vimeo and YouTube content with ease.

    FooGallery distinguishes itself with a number of interesting extensions you can use to expand its basic functionality and their references for developers open up the ability to code your own with relative ease.

    Check out the FooGallery 101 page for a detailed walkthrough of common settings and their extensive demo pages for examples of the plugin in action.

Wrapping Up

Adding galleries to your posts and pages is a wonderful way of boosting user engagement and time on site, and an obviously sensible thing to do in a world increasingly obsessed with Instagram and Pinterest content.

WordPress puts an incredibly easy upload interface at your fingertips and then leaves the path clear for you to take things as far as you like in terms of customization and fancy extras.

Start by getting familiar with the basics as we’ve outlined above, then look to make the most of your image assets with options such as Jetpack, NextGEN Gallery, and FooGallery, and your site will soon be looking a cut above the rest.

How are you currently handling your own image galleries? Is there an option you think we should highlight? Let us know in the comments below.