Tall Images Popup

What the popup does with a tall image

A full-page screenshot can be 900 pixels wide and 6000 tall. Put one in a grid with a square ratio and the visitor sees the top seventh of it. The gallery above is Masonry with Media Aspect Ratio on Auto, so every item keeps its own proportions, and a click opens the file in the lightbox scaled to the window, with its title and description under it.

The alternative is Click Action on URL, the default on a new block. That sends the visitor to the raw image file, out of the page and away from the arrows and counter. Popup keeps them where they are, and Click to Zoom, on by default, magnifies the slide so a long screenshot can be dragged through at full size. The same layout with pagination under it is on the masonry gallery demo.

What the lightbox reads from each image

Two panels decide what a slide contains. Click Action is per block. Settings → Popup & Lightbox is site wide.

• Click Action offers Disabled, URL (the default), Popup, and Advanced with Pro. This gallery uses Popup.
• Title Source defaults to Image Title, Description Source to Image Description, both read from the Media Library. Either can point at the caption, the alt text or the item title.
• The four registered gallery sizes cap width only. Height is unlimited and nothing is cropped, so a tall screenshot keeps its full height.
• Vendor Script is Fancybox by default, PhotoSwipe 4 is the other option. Display Zoom Button and Display Fullscreen Button start on, Display Download Button off.
• An image with a custom URL in its Media Settings becomes a plain link and never opens the lightbox.
• Lightbox for WordPress Images, off by default, hands the same popup to core Image and Gallery blocks.

Wiring the click to the lightbox in three steps

The demo is a Visual Portfolio block. In Elementor, WPBakery or the Classic Editor, build the same gallery as a Saved Layout and place it from there.

1. Add the block, choose Media as the source and click Add Media to upload the tall files. Leave Layout on Masonry and Media Aspect Ratio on Auto.
2. Open Click Action and switch it from URL to Popup. Set Title Source and Description Source in the same panel, since those two fields put the text under the slide.
3. Go to Visual Portfolio → Settings → Popup & Lightbox, choose the Vendor Script and leave Click to Zoom on. Turn on Display Download Button if visitors are meant to keep the file.

Deep links and long galleries need a license

Nothing in the demo above does. Masonry, Click Action Popup, both lightbox scripts and the captions are free. A license starts to matter when the gallery runs past one page, or when a slide needs an address you can send to a client.

• Free: Popup as a click action, Fancybox and PhotoSwipe, arrows, counter, zoom, fullscreen, share and download.
• Deep Linking is Pro and on by default. The open slide gets its own address, so the link reopens it.
• Load Next Pages, also Pro, pulls in the next page while the visitor browses. Load More and Infinite Scroll only, not numbered pages.
• Custom Popup Image is a Pro field in each image’s Media Settings. It shows one file in the grid and another in the lightbox.
• Thumbnails Opened At Startup and Thumbnails Position are Pro. The Fancybox thumbnail strip itself is free and on.

The full split is in the free versus Pro comparison, and the tiers are on the pricing page.

Questions about tall images in the popup

Does the popup crop a long image?

No. The slide is scaled to fit the window and Click to Zoom covers the rest. Cropping happens in the grid instead. Tiles always crop, Grid and Masonry crop once Media Aspect Ratio leaves Auto, and Slider crops with a static or dynamic height. The focal point in Media Settings decides what survives, as the note on cropped gallery images explains.

Should this gallery run Fancybox or PhotoSwipe?

Both ship, and the choice is site wide. Fancybox has the thumbnail strip and the slideshow, worth having when someone is working through twenty long screenshots. PhotoSwipe is the lighter script. Everything else is in both, as the comparison of the two scripts sets out.

How wide should a long screenshot be uploaded?

At least 1920 pixels. That is the Large lightbox size, and it falls back to 800 and 500 on narrower screens. An image is never enlarged past the file you uploaded, so width is the only number to watch. Images uploaded before the plugin have no VP sizes yet, so regenerate thumbnails, as the note on blurry gallery images explains.