How To: Create Responsive Image Grid Galleries with the Final Tiles Gallery Plugin
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.
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;
- 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.
When you click through you are asked to name and give your gallery a description :
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.
The next screen lets you choose a default image size and begin uploading your images ( you can also add these later on ).
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.
If you click the “Edit” button you can go into your gallery and you will see a lot more options you can configure:
- Links and Lightbox
- Hover Effects
- Image Loaded Effects
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.
“Hover Effects” lets you rotate or zoom the image when someone mouses over it :
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.
This is how it looks on the default WordPress theme, I had set social sharing links and a zoom of 150% on hover.
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.
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.
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.