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.
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 a 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.
FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.
FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.
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.
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.
As we mentioned earlier, using Jetpack is just one way to build on WordPress’ native gallery functionality. 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
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 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.
Tags:
Aileen Javier Aileen has over 10 years of experience in content writing and content marketing. She’s handled content teams, planned editorial calendars, and managed projects. She’s also written blogs, web copy, social media posts, and email newsletters for brands in different industries.