Are you looking to add an image gallery to your WordPress-powered website? Image gallery adds a better user experience to a website. It also helps to place a large collection of photos together. Your visitors can see all your service-related images in one place.

In this tutorial, we study how to add an image gallery to a WordPress website.

Why Need A WordPress Image Gallery?

Image galleries are useful in displaying the quality of your product or services. It also helps to create a visually appealing website. Adding an image gallery shows your customers they can trust your company for the products or services you are offering.

Most of your users want to see photos to be convinced that your product or services are suitable for their needs. As a website owner, by showing a stunning image gallery you are telling your users how expertise you are in your work.

There are several gallery plugins available on the WordPress plugin repository. Most of them work very well and are popular. One of them is FooGalley which is easy to use, retina-ready, fast, responsive, and provides stunning gallery layouts.

FooPlugins has developed this WordPress image gallery plugin called FooGallery. They offer both free and pro versions of a plugin. Users can check out the various demos of a plugin here.

Getting Started

To get started, you need to first install and activate the plugin FooGallery.

Upon activation, you will find the menu FooGallery. This plugin comes with a free and paid extension which you will find at FooGallery->Extensions.

Let’s say you want to open each image from the gallery in the lightbox. In that case, from the Extensions page download and activate the FooBox Free plugin.

Upon download, a success message would display with the link to activate the plugin. Click on the link and activate a plugin.

Similarly, you can try out the other extensions.

We are now ready to add our first image gallery. Head over to FooGallery->Add Gallery. On this page, you will find a lot of configuration options.

Give a title to your gallery. Add the images to your gallery. Under Gallery Settings, choose ‘Responsive Image Gallery’.

Choose the ‘Full Size Image’ option from the Thumbnail Link section. From the Lightbox drop-down select FooBox.

Don’t forget to save your changes. Upon creating a gallery you will get the shortcode which you can place anywhere on your website.

Apart from the above configurations, there are tons of options the plugin is providing. You can play around with it.

Display WordPress Image Gallery On A Website

You have created your image gallery. Next, we need to display this gallery on the front end of a website. Go to the edit screen of any page/post where you want to display the gallery. You will find a ‘FooGallery’ block.

Add this block in the editor. The Select Gallery button opens a modal window. From this modal window, you will get all your galleries. Choose the preferred one and hit the Insert Gallery button.

Alternatively, you can paste the gallery shortcode directly into the editor.

Save the changes. Now if you visit the page/post your gallery will look as follows:

If you click on any of the images, it will show you a beautiful lightbox as follows:

That’s it! It’s very easy to add an image gallery to your WordPress website. What are your thoughts? Share in the comment section below.

Related Articles

• MailChimp Integration with Contact Form 7 Plugin
• Adding Custom Image Button with Media Uploader in WordPress
• How to Integrate Ajax File Upload in WordPress

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.