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.
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.
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.
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.
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.
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:
- Link to: Choose from the standard options of None, Media File, and Attachment Page.
- Columns: Three columns is the default setting here.
- Random order: You can opt to have images appear in a random order.
- 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.
A quick click of the Preview button shows us that everything is showing up nicely on the front end as well.
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.
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.
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.
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.
After you’ve clicked Activate, hover over Tiled Galleries again and you should see an option to configure the new functionality.
This takes you directly to Settings > Media where you’ll see a new checkbox option called Tiled Galleries.
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.
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.
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.
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.
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.