How to Use the Free WordPress FooGallery Plugin to Create Image Galleries

Some websites require you to add many images in a single post or webpage. For example, you might want to upload a lot of images from an art exhibition or an event on a website. Similarly, any business that focuses on products and services might add a lot of relevant images on a single page.

When used properly, images can make any webpage a lot more interesting compared to a page with just lots of text. However, using multiple images on a single webpage has its own downsides. Big images will take up a lot of space on the page. They will also use a lot of bandwidth and decrease page loading speed on slow networks. You can solve both these problems with some good WordPress gallery plugins.

In this tutorial, you will learn how to create an image gallery using the free WordPress FooGallery plugin.

What We'll Be Building

As I stated earlier, we will use the FooGallery plugin to create an image gallery.

The gallery will have 14 images of ducks. Some of them are my own pictures, and others were taken from Pixabay. The image below shows you the gallery design that you will have by the end of this tutorial. The text in the screenshot came from the Wikipedia entry about ducks.

We will use the plugin to set the border width, box shadow, and thumbnail size.

The plugin also allows you to set up pagination for the image gallery. This is useful if you have a lot of images in the gallery. The background, border radius of the thumbnails, and a few other things in the gallery have been modified using custom CSS.

By default, clicking on any thumbnail will open a large version of the image in a lightbox. However, you need to install a lightbox plugin for that to happen. The FooBox Free Edition is a free plugin that works with FooGallery.

Getting Started

Once you've installed and activated the plugin, you can start creating your own responsive image gallery by clicking on FooGallery > Add Gallery in your WordPress dashboard.

You can now give a title to your gallery and add any images from the media library in your gallery by clicking on the Add From Media Library button.

After uploading the images, you can specify some general options for the gallery by clicking on the General tab.

In our case, we will set the Width and Height of thumbnails to 100 px.

The Link To setting allows you to specify what happens when a user clicks on one of the thumbnails. If you have installed a lightbox plugin, the Full Size Image option will open the image in a lightbox. Otherwise, it will simply open the original image in the web browser. If you are creating a gallery with product images, you can also set the option to Custom URL in order to open a specific product page.

The Alignment setting controls the alignment of thumbnails within the gallery container. We will set it to Center for our gallery.

Customizing the Thumbnails

You can change a lot of aspects related to thumbnails with the help of settings in Appearance tab. This includes the border color, border width, and box shadow.

Before we make any changes to these settings, you should click on the Gallery Preview button on the top of the page in order to see a live preview of the gallery in the dashboard itself.

The Theme setting basically controls the border color for thumbnails. We will set it to light in order to add a white border around the thumbnails.

You can also determine how round the corners should be for each thumbnail. When Rounded Corners is set to None, the thumbnails will be perfect squares or rectangles. When set to Full, you will get circular thumbnails instead of square ones.

The Loading Icon setting is used to determine the icon that appears before the thumbnails have loaded. This is different than any loading animation that appears when the border is loading a full image after clicking on a thumbnail.

The Loaded Effect setting determines if the thumbnails should appear on the webpage with any animation after loading. We will set it to a simple Fade In animation.

Adding Nice Hover Effects

There are a couple of settings that you can change in order to add nice hover animations on the thumbnails.

The Color Effect setting will determine if the thumbnails should be colorful or greyscale when a user hovers over them. We will set the value to Greyscale. Now, the thumbnails will originally have their natural color but will change to greyscale when a user hovers over them.

The Scaling Effect scales up the thumbnails a bit when set to Scaled. We will leave it at its default value of None in this tutorial.

The Transition setting determines how the overlay should animate over the thumbnails when a user hovers over them. There are a couple of options available here. If you want the overlay instantly, simply select Instant from the dropdown menu. This will remove any overlay animation from the thumbnails. For our gallery, we will apply a subtle animation with Fade.

The Icon setting determines the icon that appears in the overlay. We will use the small magnifying icon for our thumbnails because it lets the users know that clicking on the thumbnail will show them an enlarged version of the image. The icon is also small enough so as not to cover the entire thumbnail.

Adding Pagination to Gallery

Even with relatively small 100 by 100 thumbnails, the gallery will take up a lot of space if it includes many images. At this point, it probably wouldn't be a good idea to make the thumbnails even smaller.

If you cannot reduce the number of images in the gallery, a user-friendly option to display the gallery would be to add pagination. This way, you can show only a subset of images in the gallery container and allow users to click on the dots below the gallery in order to see the next set of images.

All settings related to pagination are available under the Paging tab. The Page Size setting determines the number of thumbnails to show at once. By default, the navigation dots for the gallery are added at both the top and bottom positions. We will show them only at the bottom by setting the value of Position to Bottom.

The Theme setting simply controls the color of the dots. The dark theme makes the selected dot indistinguishable from other dots, so we will set the Theme to Light.

The Scroll To Top setting will take users back to the top of the gallery container when users click on any of the pagination dots. We will set it to No for our gallery because there are only ten thumbnails on each page. Adding scrolling here will only distract the user because they can see the whole gallery anyway.

If you have a large number of images in your gallery, you should consider setting the Paging Output value to JSON. Since we don't have a lot of images in our gallery, we will select HTML.

Applying Custom CSS to the Gallery

The only thing left for us to do now is apply some custom CSS in order to make our gallery unique and stylish. There is a section below all these settings where you can write your own custom CSS that will apply to the gallery.

The plugin will tell you the id which you can use in your selectors to target this particular gallery. Here is the CSS that we are going to use for this tutorial:

#foogallery-gallery-80 {
    background: radial-gradient(#f65d5d, #900090);
    padding: 20px 0;
    border-radius: 2px;
    border: 10px solid #f5f5f5;
    outline: 5px solid #e0e0e0;
}

#foogallery-gallery-80.fg-dark .fg-item-inner, .foogallery.fg-light .fg-item-inner {
   border-radius: 15% 85% 14% 86% / 86% 23% 77% 14%;
}

#foogallery-gallery-80 figcaption.fg-caption {
   background: rgba(0,0,0, 0.5);
}

We begin by applying a background and outline to our gallery container. After that, we apply a fancier border radius to the thumbnails to make them more stylish.

Finally, we lighten the background color of the overlay that appears when we hover over any image. The last bit makes sure that users can still see the image when they hover over a thumbnail.

After following all the steps in the tutorial, you will get the following result.

Final Thoughts

In this tutorial, we learned how to use the free FooGallery plugin to add image galleries to our WordPress websites. The plugin provides a lot of basic features that can help you create galleries with ease.

However, there are a couple of limitations of this free plugin. For example, you cannot create a gallery that contains both images and videos. Similarly, you cannot integrate any other lightbox besides FooBox with this plugin.

If you are looking for WordPress gallery plugins that offer many more features and don't lock you in with their own plugins, please browse through these premium WordPress gallery plugins available on CodeCanyon. You will get free lifetime updates as well as free support for six months.

Which is your favorite free or paid WordPress gallery plugin? Let us know in the comments below.