Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

Today I'm looking at a plugin which allows you to create great looking responsive grid galleries within WordPress. One of the main features of this plugin is that it allows you to upload images of any size and it will display them in a grid format which is not constrained by rows or columns - it will fit them into a tiled grid layout which is different depending on what size images you upload, where possible it will keep your image size or resize it but maintain the aspect ratio.

As you add more images, the grid layout will change, fitting all your images into a perfect grid layout. The plugin also has some nice features such as different hover effects, image captions, loading progress bars, support for videos, social sharing, lightboxes and so on.

The plugin can be used for many purposes, for example you could create a portfolio website using it to diplay your work or use it to embed photography galleries in your site - perfect for photographers, wedding websites and so on.

1

Final Tiles Gallery »

Plugin Features

This is a very comprehensive plugin, take a look at the full run-down of available features:

  • Hover effects
  • Tuning on hover effects
  • Icons in captions
  • Fixed captions
  • Loading progress bar
  • No crop: unlike many other tiled galleries, it doesn’t crop images, unless you decide to use the snapping to a grid, in that case a small part of the image could be cut;
  • Responsive: the gallery is responsive by default, when it’s container changes width each tile will move with an animation;
  • Add multiple images: select and add many images from the WordPress media panel
  • Gallery width: set the gallery width
  • Custom CSS: you can easily add custom CSS
  • Custom scripts: you can add scripts to run after gallery initialization
  • Portfolio: perfect tool for portfolios and photo galleries;
  • Change image size: select the size of the images after you added to the gallery
  • Social sharing: each image can be shared using Twitter. Google+, Facebook and Pinterest;
  • Multiple galleries: you can add any galleries in a post as many as you like;
  • Custom captions: tune the captions setting opacity, animations, color and duration;
  • Advanced admin UI: enhanced administration panel;
  • 5 Lightboxes available: choose your favourite lightbox between Magnific, Colorbox, Fancybox, PrettyPhoto, Swipebox;
  • Social Gallery compatible: sold separately by EpicPlugins
  • Widget: Now you can insert the galleries inside Text Widgets
  • Image Size Factor: resize all images easily with just one control
  • Default image size: used when adding images to a gallery
  • Gallery management: each gallery is saved in WordPress database so you can edit them whenever you want: you can add, rename, delete and edit the galleries;
  • Custom links: each image can be linked to a custom URL;
  • Zoom: each image can be shown in a bigger format;
  • Filters: Define your own filters for each gallery
  • Bulk actions: delete or assign filters with multi-selection
  • Blank links: now links can have the _blank target
  • Style borders: refine border colors, size and radius
  • Shadow: refine shadow size and color
  • Disallow image enlargement: now you can disable automatic image enlargement when it occurs.
  • Shuffle: Enable or disable image shuffle;
  • Styling: you have control on margins and snapping grid;
  • CSS3 animations / JS fallback: the script detects if the browser can support CSS native animations and, if so, it uses them to take advantage of hardware acceleration, otherwise it uses javascript animations;
  • Mobile friendly: the script works great on all devices, even mobile, that can run a common browser;
  • Guaranteed support: we alway do our best to help and give support when needed.

Using The Plugin

Once you have uploaded and activated the plugin, it adds a new menu to your WordPress admin named "Final Tiles Gallery" follow the first link and you are presented with the main plugin screen prompting you to add your first gallery.

2

When you click through you are asked to name and give your gallery a description :

3

You can then choose the source of images for your gallery, you can choose from: The Media Library, Recent Posts with Featured Images or WooCommerce products if you are using that plugin.

4

Next you can choose options for captions, you can choose to disable them, use the image title, image description and choose from a number of effects.

5

The next screen lets you choose a default image size and begin uploading your images ( you can also add these later on ).

6

Once you have added your images, your gallery will be saved and you will now see it listed on the plugin main screen. From here you can grab a shortcode to display it, Go back in and edit the gallery, clone it or trash it.

6

If you click the "Edit" button you can go into your gallery and you will see a lot more options you can configure:

  • General
  • Links and Lightbox
  • Captions
  • Hover Effects
  • Image Loaded Effects
  • Style
  • Customizations
  • Images

8

You should work your way through each of these tabs to tweak your gallery as there are a lot of interesting options, for example the "Links & Lightbox" tab has the option to turn on Twitter, Facebook, Pinterest and Google + sharing for your images.

9

"Hover Effects" lets you rotate or zoom the image when someone mouses over it :

10

Testing Your Gallery

Once you have your options setup to your liking, you can place the gallery and see how it looks on your site. Visit the gallery listing page and click "Show Shortcode" and it will display a code to copy, you can then paste this into a page or post.

11

This is how it looks on the default WordPress theme, I had set social sharing links and a zoom of 150% on hover.

12

If you have one of the light box settings enabled, clicking an image will load it up full screen with controls to navigate the gallery. In this example I chose the "Pretty Photo" option.

13

View More Examples

There is a demo site setup where you can view a lot of different styled demos so you can get a feel for what's possible with this plugin.

14

15

Wrapping Up

This is a neat little light-weight plugin which can help you create nice looking responsive galleries - its a good improvement over the gallery styling included in most themes when you use the native WordPress gallery feature. I can see this being used mainly on photographer portfolio sites or for creating a site to share photos with your friends and family. It only costs $19 so that's a steal in my book - check it out.

Final Tiles Gallery »

Published:

Last updated on:

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

One thought on “How To: Create Responsive Image Grid Galleries with the Final Tiles Gallery Plugin

  1. Hallo, thank you for the article. As a beginner, I wonder what happens if I use Final Tiles and later decide that I want to switch to an other gallery plugin.

    As far as I understand, since Final Tiles uses its own Shortcode, if I remove the plugin, all galleries are broken?

    Is there a different approach possible? I would prefer to use the WordPress built-in gallery and use a plugin to give them a better style/ functionality. So If I decide to remove the plugin later, all functionality graceful degrades to a standard wordpress gallery.
    Would this be possible and what would be the disadvantages of this approach?

    Greetings Konrad

Comments are closed.

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!