Tiled Galleries
Tiled gallery formats have been around on some of our websites for years, but recently I upgraded and improved the code and performance, so I'm happy to announce that as of version 5.9.7 the tiled formats are now standard options for all of our websites! These formats offer a dynamic, modern look that can give your galleries a more dramatic visual impact.
When you edit any photo gallery there are two tiled formats to choose from: horizontal or vertical. Note that this only apply to galleries that display photo thumbnails, not sub-gallery formats.
Horizontal Tiled Format
The "horizontal tiled" format (also commonly known as a "justified" grid format) arranges the photo thumbnails in rows that stretch the width of the browser window. This format is great for galleries that contain panoramas, as the panoramic images can span more width and have more visual prominence than in normal gallery grids.
This gallery format has the following layout options, which you can control in the admin at Galleries > Settings:
- Margins: Set the pixel width of the margins between the thumbnails. You could have 1-2px margins for a really tight grid, or for more breathing room between thumbnails you can enter a margin like 20-30px.
- Row Height: You can also choose the approximate row height. Note that the row height will vary from row to row. The default row height is 320px but you can make that smaller if you want to display more thumbnails on screen at once.
* This format looks great but can occasionally produce unexpected results depending on the order and shape of the thumbnails, and the screen width. To prevent having stray oversized rows, try to avoid having one normal or vertical image sandwiched in between two panos, for instance. You can play around with the photo sequencing in each gallery to get a flow with a nice balance of colors and tile sizes.
Vertical Tiled Format
The "vertical tiled" format (also commonly known as a "masonry" or "waterfall" grid format), works especially well for galleries with more vertical photos, as you may have guessed.
This gallery format has the following layout options, which you can control in the admin at Galleries > Settings:
- Margins: Set the pixel width of the margins between the thumbnails. The vertical tiled format also looks good with more traditional spacing like 50-60px if you don't like the tight grid look as much.
- Image Borders: If your site design already includes image borders, you can choose whether or not you want to have image borders in this format. If you show borders, it's best to use a larger margin number.
- Title Alignment: You can choose if you want the thumbnail titles to be left-aligned or centered over the thumbnail.
This gallery format is also compatible with the normal gallery layout settings including thumbnail size and max number of columns.
Performance and Image Quality
Both these tiled gallery formats are equipped with responsive images to ensure that the photos have sharp detail on high-res screens and monitors.
The horizontal-tiled format is also compatible with WebP images for quicker image loading.
Both formats feature lazy loading of images, so that only the images within or near the viewing window are initially loaded, then more images load in as the user scrolls down the page. This leads to faster page loading and less bandwidth waste.
Both formats only display their tiled layouts in windows wider than about 600-800px; on narrower screens like most phones, the thumbnails will display in a normal single-column layout without tiles. This methodology offers excellent loading performance on phones where that matters the most and where the tiled layouts don't really have the necessary space to display anyways.
Thumbnail Image Locations
Also with version 5.9.7, you now have the option of including your photo locations along with the photo titles on the gallery thumbnails. This is a site-wide setting, which you can control at Galleries > Settings.
I hope you enjoy playing around with these updated tiled gallery formats! Please let me know if you have any questions or feedback.
