Tiles Gallery with Popup Lightbox

Why tiles instead of a grid

A tiles layout repeats a fixed pattern of boxes of different sizes instead of handing every image the same cell. The pattern is the column count, then one width and height pair per tile, so 4|1,1|1,2| is four columns whose second tile is twice as tall as it is wide. Grid is the alternative, and it suits interchangeable images, product shots or headshots that gain nothing from one frame being bigger.

Clicking a tile opens the lightbox rather than a new page. Tiles crop to the tile shape, so the popup is where a visitor sees the whole frame without leaving the page. Restore Focus, on by default, hands the keyboard back to the clicked tile when the popup closes. The skin decides what is clickable. On Fly and Fade it is the image alone. Classic and Emerge make the title a link too.

Patterns, limits and popup sources

Two panels do the work. Layout shapes the pattern, and Click Action decides what each slide shows. Both live on the block, so the tiles gallery with paged pagination can carry different values.

• The Edit Tiles modal holds 27 presets, fifteen of them three column. The default is 3|1,1|.
• A custom pattern is capped at 6 columns and 24 tiles, and a tile may span at most 6 rows.
• Gap defaults to 15 px and Vertical Gap is left empty. Both take 0 to 200 px.
• A pattern of four columns or more requests the Large (VP) image size, narrower ones Extra Large (VP).
• Columns step down at each breakpoint, so a four column pattern shows three at 992 px, two at 768 and one at 576.
• Title Source defaults to Image Title, Description Source to Image Description. The setup wizard sets Item Title and Item Description on a media gallery.
• Fancybox is the default script and PhotoSwipe the lighter of the two. Thumbnails and the slideshow exist in Fancybox only.

Setting up the pattern and the popup

1. Insert the Visual Portfolio block, pick Images in the setup wizard and choose the photos. Set a focal point on anything that will be cropped hard.
2. Open the Layout panel, choose Tiles and press Edit Tiles. The modal previews all 27 presets and highlights the one in use. Type your own when none of them fits.
3. Set Click Action to Popup, then pick Title Source and Description Source. The lightbox script, its buttons and the #1e1e1e background live in Settings → Popup & Lightbox and apply site wide.

Where Pro starts in this gallery

Nothing in the gallery above needs a license. Tiles, the popup, the Fly skin with its overlay icon, the dropdown filter and paged pagination are all in the free plugin on WordPress.org, as is reusing the layout elsewhere through Saved Layouts. Pro contains that free plugin rather than sitting on top of it. What a license changes is what the popup does once it is open, and the free versus Pro comparison and the pricing page have the rest.

• Deep Linking is on by default in Pro. The address turns into #&gid=abc123&pid=3 while a slide is open, and the browser Back button closes the popup.
• Loop carries the last slide round to the first.
• On a Load More or Infinite gallery, Load Next Pages fetches the next page while someone browses. The counter reads N+ until it does.
• Thumbnails can open with the popup, and they run down the side unless Thumbnails Position is set to Horizontal.
• Display Image Priority puts a per-item Custom Popup Image ahead of the tile’s picture in the lightbox.

Questions about tiles and the popup

Why does a tile crop my photo?

Tiles always crop to the tile shape, because the pattern fixes the height of every box in advance. The focal point on the image decides what stays inside the crop. Masonry with Media Aspect Ratio on Auto, or Justified, leaves images uncropped.

Can the popup open images outside this gallery?

Yes. Lightbox for WordPress Images, off by default, sends core Image and Gallery blocks, classic galleries and Jetpack tiled galleries through the same lightbox. Other markup joins them once its container carries the class vp-lightbox-gallery and its images link to their files.

Can I send someone a link to one slide?

Deep Linking does it, and it is Pro. Open the slide, copy the address out of the browser bar, and that address reopens the popup on the same image. The pid is the position number by default, and Picture ID for Deep Linking swaps it for the file name, title or alt text. On a paginated gallery the page travels with it as ?vp_page=2.