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<\/a> and further improvements in\u00a0version\u00a03.9<\/a>. With the introduction of responsive images<\/a> in WordPress 4.4<\/a>, images are very much back on the agenda, so it’s a good time to review the basics of setting up an image gallery.<\/p>\n 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:<\/p>\n With those introductions out of the way, let’s crack on with making our own image gallery.<\/p>\n 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\u00a0Jetpack<\/a>. We’ll also draw your attention to some of the leading gallery plugins you can use to expand the basic functionality on offer.<\/p>\n We’re using a local install of WordPress 4.4 and taking the new Twenty Sixteen<\/a> theme for a spin. We’ll be looking at adding some attractive pictures of owls to our site \u2013 sourced from the fantastic resource that is Pixabay<\/a> \u2013 because, let’s face it, there’s something fundamentally\u00a0awesome about owls.<\/p>\n Here’s a snapshot of the page I’d like to spice up with some high-quality imagery \u2013 as you can see, it’s pretty bland right now.<\/p>\n We’ll kick things off by moving into the admin, selecting our post, picking an insertion point and then clicking the Add Media<\/strong> button in the toolbar.<\/p>\n 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 \u2013 we’ve added a new line above to make the insertion point clear. Clicking the Add Media<\/strong> button kicks you into the Media Uploader interface and Create Gallery<\/strong> is, unsurprisingly, the option to go for here.<\/p>\n As you can see in the screenshot below, selecting this option gives you the possibility to either upload entirely new images\u00a0or 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.<\/p>\n 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.<\/p>\n Clicking the Create a new gallery<\/strong> button bumps us into the Edit Gallery<\/strong> 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.<\/p>\n 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<\/em> button if that’s all you need.<\/p>\n When it comes to Gallery Settings<\/strong> you have four options to play with:<\/p>\n Once we’ve made our initial selections, clicking on Insert gallery<\/strong> pops us back into the editor where we can see our collections of owls in all their feathery glory.<\/p>\n A quick click of the Preview<\/strong> button shows us that everything is showing up nicely on the front end as well.<\/p>\n 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.<\/p>\n 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<\/a> for full details of syntax and options.<\/p>\n 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<\/em> option is set to none \u2013 it’d be nice to have a slideshow effect in here somehow if possible.<\/p>\n 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.<\/p>\n Things couldn’t be easier here \u2013 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.<\/p>\n In our case, we’ve changed to a two column layout, bumped the image size up to Medium<\/em>, and added some appropriate captions to identify our individual owls.<\/p>\n 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.<\/p>\n A brief note before we go further:\u00a0We’ll be using the Jetpack plugin<\/a> to fancy up our gallery here, but there are many other ways of going about this. Some people may have bloat-related concerns<\/a> 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).<\/p>\n 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<\/em> as explained in the Jetpack documentation<\/a>.<\/p>\n After you’ve installed Jetpack and edited wp-config.php<\/em>, click Jetpack<\/em> in the admin side menu and you should see a message confirming that you’re running in Development Mode as pictured above.<\/p>\n From here, scroll down the page and click on the button that says See the other 27 Jetpack features<\/em>. 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<\/a> available. Hover over this and you’ll see an option to activate the functionality appear.<\/p>\n After you’ve clicked Activate<\/strong>, hover over Tiled Galleries<\/strong> again and you should see an option to configure the new functionality.<\/p>\n This takes you directly to Settings > Media<\/strong>\u00a0where you’ll see a new checkbox option called Tiled Galleries<\/strong>.<\/p>\n After enabling, if we return to a preview of our feathered friends, things should be looking a lot tidier now \u2013 the larger versions of the images are still being used, but everything is now neatly organized in a tiled grid.<\/p>\n 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<\/a>.<\/p>\n We’ve covered a lot of ground and all that remains now is to really set our owls free by enabling the Carousel<\/a> option in Jetpack \u2013 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<\/p>\n We’re looking at the same series of activation steps as before with Tiled Galleries. Return to your list of Jetpack modules, activate Carousel<\/strong> and hit Configure<\/strong>.<\/p>\n Once again, were kicked back into Settings > Media <\/strong>and this time, you’ll notice a new option called Image Gallery Carousel<\/strong>. The options here are pretty straightforward \u2013 you can switch the functionality on or off, choose whether to show Exif data<\/a> and select between black or white as your\u00a0slideshow background.<\/p>\n 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.<\/p>\n We’ve covered image gallery plugins in some depth<\/a> before recently on the blog so we won’t go over too much old ground here.<\/p>\n 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.<\/p>\n When it comes to fully featured WordPress gallery plugins, it’s hard to look past NextGEN Gallery<\/a>. 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.<\/p>\n The free version of the plugin<\/a> gives you beautiful responsive design, a selection of built-in lightboxes\u00a0and slideshow options, the ability to add entire albums of galleries to your site, and a host of other features.<\/p>\n Kick things up to the premium NextGEN Plus<\/a>\u00a0or\u00a0NextGEN Pro<\/a>\u00a0versions and you start getting into seriously sophisticated options more suitable to professional photographers such as integrated e-commerce<\/a>, image proofing<\/a>, image protection and the ability to sell digital downloads. Full pricing details<\/a> for the two premium packages are available on the NextGEN site.<\/p>\n<\/section>![\"An](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/mullenweg-gallery-2008.jpg\")
<\/a>\n
How to Create a Basic Image Gallery<\/h2>\n
![\"Owl](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/owl-blog-post.png\")
![\"Adding](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/insert-cursor-add-media.png\")
![\"Uploading](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/upload-owl-pics.png\")
![\"Edit](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/edit-gallery-options.png\")
\n
![\"View](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/gallery-in-editor.png\")
![\"Owl](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/live-owl-gallery.png\")
How to Edit Your Image Gallery<\/h2>\n
![\"Edit](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/edit-galleries-button.png\")
![\"Two](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/two-column-gallery-layout.jpg\")
Adding a Tiled Gallery and Simple Slideshow with Jetpack<\/h2>\n
![\"Jetpack](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/jetpack-development-mode.png\")
![\"Activate](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/activate-tiled-galleries.png\")
![\"Configure](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/configure-tiled-galleries.png\")
![\"Choose](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/choose-tiled-galleries.png\")
![\"Tiled](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/tiled-owl-gallery-700x756.jpg\")
<\/div>\n![\"Gallery](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/gallery-type-options.png\")
![\"Activate](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/configure-carousel.png\")
![\"Activate](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/activate-image-carousel.png\")
<\/div>\n![\"Gallery](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/gallery-slideshow.jpg\")
Quality Image Gallery Plugins<\/h2>\n
1. NextGEN Gallery<\/h3><\/header>
![\"1.](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/nextgen-gallery-600x171.png\")
<\/section>