Tiles Gallery with Paged Pagination

Why split a tiles gallery into pages

Paged pagination cuts a gallery into numbered pages and draws the numbers under the last row of tiles. The row under this demo reads 1 2 3 4, and the previous arrow appears once you are past page one. A click loads that page over AJAX, so the tiles swap without a reload and the address picks up ?vp_page=2. On the Portfolio page the same click gives you /page/2/. The Pagination element opens on Load More, so Paged is a switch you set yourself.

Pick it when the collection has an order worth keeping and someone may want to come back to one part of it. Page three has an address, so it can be bookmarked or linked from another post. Infinite scroll is the alternative. It appends the next batch as the visitor nears the bottom, which suits a feed nobody returns to. The masonry gallery with infinite scroll is the demo for that.

Page size, style and the arrows

The Pagination element lives in the End position of the Layout panel, below the items. Page size does not. It sits one panel up, in Content Source, and the pagination documentation lists the rest.

• Type: Paged, Load More or Infinite, Load More by default. Only Paged gives each page an address of its own.
• Style: Minimal or Classic, Minimal by default. Minimal prints plain numbers and links, Classic draws them as buttons.
• Display Arrows and Display Numbers, both on. Switch the numbers off and the previous and next arrows carry the row alone.
• Scroll to Top, on, with Scroll to Top Offset at 30 px, the room kept above the gallery for a sticky header.
• Items Per Page, in Content Source under General Settings, default 6. All Items stores -1 and puts everything on one page.
• Tiles Type, the repeating pattern, default 3|1,1|, three columns of squares. Written by hand it is capped at 6 columns and 24 tiles.

From an empty block to a numbered row

1. Insert the Visual Portfolio block and take the Tiles variation, which presets the layout. In the setup wizard choose Media as the source, then click Add Media and select the photos.
2. Open Content Source, General Settings, and set Items Per Page. It starts at 6, which is what this demo runs on.
3. In the Layout panel click + in the End position, add Pagination and set Type to Paged. Pick Minimal or Classic, then align the row with the dropdown that appears once the position holds an element.

Everything here is free except the tilt

Paged pagination, the tiles layout, the Fade skin, the dropdown filter and the popup all ship in the free plugin on WordPress.org. So does the Saved Layout that hands the same gallery to Elementor or the Classic Editor. Pro is that same plugin with the paid modules built in, not an add-on standing beside it. The hover tilt on the tiles above is the one part of this demo a license pays for. The free versus Pro comparison goes line by line, and the pricing page has the tiers.

• The tilt effect, running here in the opposite direction, is Pro. So are the image filters and the image transform beside it.
• AJAX Cache and Preload is Pro, under Settings, General. Responses are kept in the browser and the next page is fetched before the click lands.
• Threshold Distance, 10 to 800 px and 400 by default, and the two Display Load More pauses are Pro. All three belong to Infinite rather than Paged.
• A Search element in the top row is Pro. Filter and Sort in that same row are free.

Three questions about numbered pages

How many tiles should one page carry?

There is no hard limit. Above 40 items on one page the editor warns that the page will load slower. Keep Items Per Page at 40 or fewer and let the numbers carry the rest, as the answer on how many images a gallery can hold puts it.

Does paging work behind a caching plugin?

Yes. The page holding the gallery caches like any other. Filter, sort and pagination requests from the block are POST requests, so they go past the page cache instead of returning a stale page one. The note on caching plugins names the caches it covers.

Does Google index page two?

On an ordinary page, no. Filtered, sorted and paged views there are marked noindex, follow, so a crawler walks the links out of them without filing four near identical pages. The Portfolio page is the exception, and its paged and category URLs stay indexable. The gallery SEO answer covers what Yoast, Rank Math and All in One SEO put in the sitemap.