Masonry Gallery with Infinite Scroll

How infinite scroll changes a masonry gallery

Masonry gives every image its own height and lets the columns end at different lengths, so nothing is cropped to fit a row. Infinite scroll is a pagination type, so it changes when the next items arrive, not how they are laid out. The first page renders with the page itself. The next one is fetched over AJAX and appended to the columns when the visitor scrolls near the end. The gallery above holds five items per page in two columns.

Load More appends the same way but waits for a click, which is what the masonry gallery demo uses. Paged pagination goes the other way. Every page becomes a real URL, ?vp_page=2 on an ordinary page or /page/2/ on the Portfolio page. Pick that when a visitor has to bookmark page four, or when the page ends in a footer people should reach.

Values in the Pagination panel

Pagination sits under Layout in the block sidebar, and page size lives elsewhere, in Content Source. The pagination documentation has the full table.

• Type takes Paged, Load More or Infinite and starts on Load More, so infinite scroll is always a deliberate switch.
• Items Per Page defaults to 6, and All Items puts everything on one page, which disables pagination in practice. The editor asks you to stay under 40 on a big gallery.
• Threshold Distance, 10 to 800 px and 400 by default, decides how far from the end of the gallery the next load starts. Pro.
• Display Load More on startup is off by default. Turned on, nothing loads by itself until the visitor clicks the button once. Pro.
• Display Load More every page load pauses after 2 to 20 automatic loads, 5 by default, and shows the button again. Pro.
• The three texts on the button are block settings, not translation strings. Until you change them they read Load More, Loading More and You’ve reached the end of the list.

Building the same gallery yourself

1. Insert a Visual Portfolio block and choose Media as the source. Click Add Media, pick or upload the images, then Select. The list under the button shows 18 at a time, and you drag them into the order you want.
2. Open Layout, pick Masonry and set Columns, which runs from 1 to 5 and defaults to 3. Leave Media Aspect Ratio on Auto. Any other value crops every image to that ratio and turns the masonry into an even grid.
3. Still in Layout, open Pagination and set Type to Infinite. Items Per Page is back in Content Source. The editor preview draws a Load More button instead of scrolling, which the panel tells you to expect.

What a license adds to this gallery

Masonry, infinite scroll, the AJAX filter and the popup gallery are all in the free plugin, along with Saved Layouts, which repeat the same gallery on another page. Pro adds the tuning around them, listed in the free versus Pro comparison and priced on the pricing page.

• The three Pagination settings marked Pro above, Threshold Distance and the two Display Load More toggles.
• Load Next Pages in the lightbox. With Infinite pagination and the Popup click action, the lightbox fetches the next page once the visitor is within two slides of the end. The counter shows N+ until the pages run out.
• Responsive Breakpoints. The free ladder is fixed at 320, 576, 768, 992 and 1200 px; Pro moves those widths in Settings.
• Move Caption Under Image, which the demo above uses to drop the Emerge caption below the picture on small screens.

What people ask about infinite scroll

Where is Items Per Page?

Not in the Pagination panel, where most people look first. It sits in Content Source under General Settings and defaults to 6. On the Portfolio page the number comes from Settings, General, Archive Page Items Per Page instead, as the answer on Items Per Page says.

Why does scrolling bring back the same images?

Usually a page cache that ignores the page parameter and serves page one every time. Add the vp_page, vp_filter and vp_sort query arguments to the allow list of the caching plugin or CDN. A random item order does it too, because random cannot be paginated. Both cases are on the page about repeated items.

Do search engines see the images that load on scroll?

Only the first page is in the HTML a crawler receives. That matters less than it sounds, because Yoast SEO, Rank Math and All in One SEO put gallery images into their XML sitemaps. The markup is plain HTML with real links and alt text, and paged or filtered views on ordinary pages are marked noindex, follow, as gallery SEO explains.