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

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 (see my previous blog post “Building My “Boxed” Demo Site – Part 1“). 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. However, 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. 1920px is generally recommended for full width images.

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 wide images I mentioned might be a little larger though. Sometimes I’ll use an online tool such as Kraken.io 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 – usually Thumbnail, Medium and Large size images as determined in the Dashboard under Settings > Media. 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% resulting 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 went 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.

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 circular images and custom margins.
  • It works by extending the usual WordPress gallery and if you disable the plugin, then galleries revert to normal WordPress ones, rather than being lost.
  • 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.

The only possible drawback that struck me was that, although my gallery was responsive, it switched from 3 columns straight to 1 column on smaller screens, whereas FooGallery went from 3 to 2 columns.

The other point to mention is that a lot of the plugin’s options are not available in the lite version. It wasn’t possible to opt not to show captions under my images, or to link images to URL’s, without the pro version of the plugin. All in all, I was impressed though.

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:

Leave a comment