How to Create an In-Post Image Gallery on WordPress

Article written by:
  • WordPress
  • Sep 05, 2017

Building a beautiful WordPress website is not rocket science.

Just like how every site-owner has a unique set of goals, WordPress sites have endless possible configurations. And as a WordPress user, your main goal is to identify the perfect combination of plugins, content, and styling options for a truly compelling user experience.

In this post, we’ll take a look at the best methods to spice up your posts with image galleries.

Jump to:

Let’s get cracking!

Method #1: Using FooGallery

If there’s one thing the WordPress community should be grateful for, it’s the free plugin repository that makes it easy to integrate useful features into their site.

FooGallery is one of the most popular plugins you can use to create in-post image galleries. It allows you to create beautiful, mobile responsive, and retina-ready galleries without writing a single line of code.

The fastest way to install FooGallery is through the WordPress dashboard. Go to Plugins > Add New, type in “FooGallery”, and click the Install button.

After installation and activation, you can start creating your first gallery by clicking FooGallery > Add Gallery.

Insert a title that will help you identify what the gallery is all about. This won’t be visible to users, so feel free to use any title you want.

To add photos to your gallery, click on Add Media under “Gallery Items”.

This should bring up the familiar interface wherein you can choose an image from your media library, or upload a new one by clicking the Upload Files tab.

When adding images to your gallery, pay attention to the image file’s caption and title as you can choose to display either two when users hover over them.

Choosing a Template

Once you have uploaded all the images you need, go ahead and adjust the settings as you see fit. Start by selecting a template for your gallery.

The template essentially dictates how your gallery is going to appear.

For example, the Responsive Image Gallery template shows all images as a grid that automatically adjusts based on screen size:

On the other hand, the Image Viewer template displays one image at a time while providing users with navigation buttons:

Take note that the rest of the available settings depend on your template. Some of the settings you can find are the gallery’s alignment, thumbnail size, hover effects, grid spacing, lightbox plugin, and so on.

Feel free to play with these settings until you achieve the appearance you want. A good strategy is to have the galleries open in one tab and a test page on another.

This leads to the next step – adding image galleries into posts.

Inserting Galleries into Posts

There are basically two ways to add image galleries into your content: via shortcode and through the WordPress post editor.

To find the shortcode for a particular gallery, go to FooGallery > Galleries from the dashboard. Click on the shortcode to automatically copy it to your clipboard.

Next, simply paste the shortcode within the content area of any post or page. If it works, you should see a blank gallery placeholder with the shortcode displayed at the bottom.

Don’t worry – the placeholder doesn’t represent what the gallery will look like when the actual page is loaded.

The other alternative is to insert galleries straight into a post or page. From the WordPress dashboard, open the page or post you wish to use and click the Add FooGallery button in the editor.

This will bring up the “Choose a Gallery” window where you can find all the available galleries you can use. You can also create a new gallery from scratch through here.

To add a gallery, click on its thumbnail and then click the Insert Gallery button.

If you can’t find the gallery you want to use, you may have just created it from a separate tab. In which case, just click the Reload button to refresh the window.

Improving FooGallery

Expandability is one of the biggest advantages of FooGallery. By going to FooGallery > Settings, you can change several aspects of how to plugin works.

For example, in the Images tab, you can adjust the thumbnail quality of galleries to a maximum of 100.

Finally, FooGallery supports a number of different lightweight extensions that add functionality. You can browse the extensions store by going to FooGallery > Extensions.

Method #2: Creating Galleries Without Plugins

If you’re not enticed by the idea of using plugins for everything, then you may consider using built-in WordPress features instead.

To create in-post galleries without plugins, go to the WordPress post editor and click Add Media.

From there, select the “Create Gallery” option and choose the images you want to use.

Once you have all the images selected, click the Create a new gallery button.

This will bring you to the Edit Gallery window where you can specify the order of the images, the number of columns you wish to use, and the gallery’s size.

Don’t forget to write a suitable caption for each image to give users a bit of context. You can also modify the linking behavior of each image.

Set this to “None” if you don’t want your gallery to be interactive in any way.

Method #3: Other Plugin Alternatives

We have now explored two of the most popular options for adding in-post galleries to WordPress posts.

To give you even more flexibility, here are a few other alternatives to FooGallery you can consider:

Portfolio Gallery by Huge IT

Site: huge-it.com/portfolio-gallery/; Price: Free / $40 for 1 site

Portfolio Gallery is part of the Huge IT WordPress plugin ecosystem. It’s an easy-to-use plugin that lets you create highly interactive galleries with multiple views, including full-height blocks, content slider, elastic grid, and lightbox gallery.

NextGEN Gallery

Site: www.imagely.com/nextgen-gallery/; Price: Free / $69

In terms of active installations, NextGEN Gallery is at the very top with over 1 million users. The only reason why FooGallery is featured in this post is its steep pricing. It also has a more elaborate settings section that can be a little confusing to new users. Nevertheless, it is a solid plugin that can help you create beautiful and responsive galleries.

Instagram Feed WD

Site: web-dorado.com/wordpress-instagram-feed-wd;  Price: Free / $25 for 1 site

You can easily use Instagram Feed WD to pull content from your Instagram account and into a customizable gallery.

This is perfect for photographers and bloggers with an established Instagram presence.

Found everything you need on how to create in-post image galleries? Don’t forget to check out the essential WordPress plugins that every site should have!

Article by Christopher Jan Benitez

Christopher Jan Benitez is a professional freelance writer who provides small businesses with content that engages their audience and increases conversion. If you are looking for high-quality articles about anything related to digital marketing, then he's your guy! Feel free to say "hi" to him on Facebook, Google+, and Twitter.

Get connected: