Building My “Boxed” Demo Site – Part 2 Photo Galleries and Slideshow

For this post, which follows on from my previous blog post “Building My “Boxed” Demo Site – Part 1“, I experimented with a few different gallery and slideshow plugins:

Some Alternative Suggestions

Although I chose to use some of the most recommended plugins for this exercise, I’d suggest that you have a look at a few of the alternatives, look for reviews and have a play with them to see how they work. Some plugins to consider include:

Adding Image Galleries with the FooGallery Plugin

I wanted the homepage of my “Boxed” demo website to consist of a grid of images, each of which was linked to one of the gallery pages that I had created earlier. I used the free FooGallery plugin to make a gallery containing these images, and chose to use a Masonry Image Gallery with the following settings:

  • Thumb width = 200
  • Masonry Layout = 3 columns
  • Gutter Size = Normal
  • Thumbnail Link = Custom URL

Clicking on one of the images allowed me to input a caption and the URL that I wanted to link it to.

I added this gallery to the homepage and created galleries for the other pages too. FooGallery galleries can be added as shortcodes or as blocks.

If this had been a real photography website, I’d have been consistent and used the same type of gallery on each page, but as it’s a demo site, I tried some of the different types including the Justified Gallery, the Responsive Image Gallery and the Simple Portfolio Gallery.

For the homepage gallery, I’d used Custom URL for the Thumbnail Link setting, but for the other pages I wanted the images to open up in a lightbox when clicked. I installed the free FooBox plugin and set Thumbnail Link to Full Size Image (Lightbox), instead of to Custom URL.

Under the Advanced tab of the FooBox settings, I ticked the box to “Exclude FooBox Assets” so that FooBox’s javascript and stylesheet assets would not be loaded on pages where I wasn’t using it. Then as I edited the homepage, and each gallery page, I ticked the option to include FooBox.

A Note About Image Quality

As a general rule, it’s a good idea to keep images as small as possible because loading large images will slow a site down, but they should never be uploaded with a smaller size, in pixels, than the size at which they will be displayed. For example, if an image is 600px wide but it is enlarged to stretch across the full width of the screen then it will look terrible. A minimum of 1920px is generally recommended for full width images.

However, you may want to consider uploading images that are twice the width (in pixels) of the space they will occupy to account for high resolution screens, such as Apple retina displays. If you try to upload an image that is more than 2560px wide or tall then WordPress will scale it down (see ).

But it’s not the size in pixels that’s important when it comes to loading time. Images should also be optimised so that they are not too big in terms of kB. Personally, I use photo processing software (usually Adobe Lightroom or Paintshop Pro) to save an image at no more than around 250 to 300kB. One of those full width, 1920px to 2560px wide images I mentioned might be a little larger though. Sometimes I’ll use an online tool such as or ShortPixel to optimise my photos. A lot of people would say that even 250kB is too big – it’s subjective.

The difficulty is that you need to balance “as small as possible” with your desire to display high quality images – particularly if you are a photographer. The Boxed demo site is supposed to be a photography portfolio site so I have taken some measures to increase the quality of the images. If you are building a more general type of website then you would probably not want to follow my example.

Given the purpose of my site, I wasn’t happy with the image quality of the thumbnails in the FooGallery galleries. In an attempt to improve this, the first thing I tried was to set the Thumbnail JPEG Quality to 100 in FooGallery > Settings > Images.

This ought to mean that when FooGallery generates thumbnails they are of a high quality.

I still didn’t feel that the thumbnails looked sharp enough though. I edited each of the galleries I’d created and added retina support.

I also ticked the “Force Original Thumbs” box. This should mean that the galleries do not use the thumbnails created by the plugin.

Since I’m being particularly picky here, I took one more step to try to get the best possible image quality. When an image is uploaded to WordPress, various smaller versions of it are created. The sizes of the Thumbnail, Medium and Large images are determined in the Dashboard under Settings > Media. Depending on the size of the image that is uploaded, images with sizes of 768px, 1536px and 2048px may also be created to be used with the srcset HTML attribute.

Because most people will need their sites to load quickly, WordPress uses a compression factor of 82%. I don’t want it to do this. I used the Code Snippets plugin to add the filter below which increases this value to 95% (I found that using 100% resulted in images that were even larger than my original upload, so I didn’t go with that.)

add_filter('jpeg_quality', function($arg){return 95;});

Using a FooGallery Album

On the homepage of my demo site, I’ve used a gallery of images each of which links to another gallery page. Another way to link to different galleries would be to use FooGallery’s Album feature. I’ve put an example of an album on one of the pages of the site.

In order to be able to create this album, I needed to activate the FooGallery Albums extension in the Dashboard under FooGallery > Extensions. This enabled me to add a new album and then add my galleries to this album.

Creating the album generated a shortcode which I could copy into a shortcode block on one of my website pages.

Using Smart Slider 3 as an Alternative Way to Display Images

Most of the gallery pages on the Boxed demo site use FooGallery galleries, but photographers often use slideshows to display their portfolios. One of the most popular slideshow plugins is Smart Slider 3. I decided to use this plugin to create a slideshow for one of my gallery pages.

I created a new slider, added some photos and set the slide background image fill to “fit”.

I worked my way through the options, experimenting with different settings until I was happy with the results. Some of the settings I ended up with were as follows:

  • Slider Size: width = 970px, height = 700px
  • Responsive mode: auto
  • Arrows but no bullets
  • Thumbnail: width = 180px, height = 120px
  • Thumbnail position at the bottom

You can see the results on the plants gallery page of the Boxed demo site. I feel that I only scratched the surface of what’s possible with Smart Slider 3 but it was enough to give me an idea of what it could do.

A Look at the GT3 Photo Gallery Plugin

I started with the FooGallery plugin for this exercise, as it’s been a favourite of mine for some time. But I was intrigued to see that Melissa Love, of The Design Space, recommended the GT3 Photo Gallery plugin. I decided to duplicate my bird gallery page to see how this plugin compares to FooGallery.

UPDATE: Melissa now recommends Photo Gallery by Supsystic instead.

I created an alternative bird gallery page on the Boxed demo site and used the lite version of the GT3 Photo Gallery plugin to build the gallery.

I found that I quite liked the plugin and felt it had some advantages over FooGallery.

  • It was easy to use.
  • The lite version of the plugin does have quite a few options, including things such as custom borders and margins, and a choice of rectangular, square or circular images for the GT3 Gallery Grid block .
  • It has a simple lightbox built into it, so there is no need for a separate plugin.
  • I could specify that I wanted to display full size images, which got around the problems with thumbnail image quality, that I discussed earlier in this article.

Although some of the plugin’s options are not available in the lite version, on the whole, I was impressed.

Another Alternative – Kadence Blocks

Kadence Blocks is not primarily a gallery plugin, but one of the blocks that it provides to be used with the WordPress block editor is an Advanced Gallery Block. I decided to add yet another page to my Boxed site using this plugin to see how it compared – and I was quite impressed.

The gallery was easy to add, it included a built in lightbox and had quite a few options, including being able to use full sized images and being able to link images to custom URLs.

Meow Gallery

After seeing a recommendation for Meow Gallery in a Facebook group, I gave it a try, along with the Meow Lightbox plugin. I didn’t want to add yet another gallery plugin to the Boxed demo site, so I used it on the gallery page of my Standard demo site instead, and found that I liked it.

Galleries are created and edited directly within a page, rather than having to be added as shortcodes or blocks.

The free version of Meow Gallery did not seem to offer as much control, or as many options as the free versions of either FooGallery or GT3 Photo Gallery, but could still be a good choice if you are after something straightforward.

Also see “WordPress Portfolios and Gallery Plugin Options” by professional photographer, Martin Bailey, in which he talks about why he uses Meow Gallery and Meow Lightbox.


FooGallery has been a favourite of mine for some time and, when I started this exercise, I expected to find that it was the plugin I would be most likely to recommend. However, having played with the alternatives shown above, I feel that if you just need a simple gallery, then you may prefer GT3, Meow or Kadence Blocks.

The plugins I have discussed offer more options than the core WordPress Gallery block. As a comparison, I added a gallery made with the core block to the gallery page of my Standard demo site. This showed the limitations of this block. Since my photos varied in shape, I had to crop them to avoid large gaps and holes in the gallery. However, if your images are all the same shape and you just want a straightforward way to display them, then the core block may be all you need.

More Tutorials

Leave a comment