A full wedding day can fill one gallery with several hundred photos. On a phone, that page keeps scrolling and keeps loading long after your client has stopped looking.
WordPress gallery pagination fixes that by splitting one big gallery into numbered pages. Visitors see a tidy first page and choose when to see more.
This tutorial is for photographers who want their biggest galleries to stay easy to browse, and the whole setup works on a free plugin.
What Is WordPress Gallery Pagination?
Gallery pagination shows a set number of photos at a time, with numbered page links underneath. A gallery of 120 photos set to 24 per page becomes five pages your visitors can step through.
It suits galleries people browse with care, like a client picking favorites from their wedding. Each page stays short enough to take in, and the page numbers show visitors how much is left.
Scroll loading is the other option. It shows a first batch of photos and adds more as the visitor scrolls, which feels closer to a social feed.
Our image optimization guide for photographers compares pagination, lazy loading and infinite scroll side by side, if you want the longer version.
How to Create a WordPress Gallery with Pagination in Imagely
I’m using Imagely, the WordPress gallery plugin built for photographers, for this tutorial. Pagination is part of the free plan, so you can follow every step below without paying for anything.
New to Imagely galleries? Start with the basics first. Read our guide to creating your first gallery!
Step 1: Open the Gallery You Want to Paginate
In your WordPress dashboard, go to Imagely » Galleries and open the gallery you want to split into pages.
If you haven’t built one yet, creating your first gallery only takes a few minutes, and you can come straight back here.
Step 2: Choose How Many Images Per Page Your Gallery Shows
Click the 02 Customize step at the top of the gallery editor. Under Choose Layout, pick Thumbnails, then open Customize Gallery Look.
Find the Images per page field and type the number of photos you want on each page. The default is 24, and 0 switches pagination off, so every photo shows on one page.
Imagely saves your changes automatically, so there’s no Save button to look for on this step.
Any number works. I’d suggest a multiple of your column count, though, so the last row on each page stays full. With three columns, 6, 12 or 24 photos per page all line up neatly.
Step 3: Keep AJAX Pagination Turned On
Just below sits Enable AJAX pagination. It lets visitors move between pages without the whole page reloading, and it’s on by default.
AJAX is the method that swaps in the next set of photos. Your visitor clicks 2, and the new photos appear right where the old ones were.
If you switch it off, clicking a page number opens that page at its own web address instead. I’d leave it on unless you need that.
Step 4: Choose What the Lightbox Shows in a Paginated Gallery
The Add hidden images setting decides what happens when a visitor opens a photo in the lightbox. With it on, the lightbox can step through the whole gallery, not only the photos on the current page.
The trade-off is page load. Imagely’s own help text warns that this option increases it, and it’s off by default.
I’d leave it off for very large galleries. It’s worth turning on when visitors will want to flip through everything in one go, like a short portfolio.
Step 5: Add the Paginated Gallery to Your Page
Open the page or post where the gallery should appear and add the Imagely block. Keep the GALLERY tab selected, choose your gallery from the dropdown, and click INSERT.
There’s nothing to set in the block itself. The pagination you chose comes along with the gallery, and our guide to adding galleries to a page or post walks through the same steps with more screenshots.
Key Takeaway
- Pagination is set on the gallery, in Customize Gallery Look, not in the block.
- Images per page starts at 24, and 0 turns pagination off.
- Enable AJAX pagination is on by default and changes pages without a reload.
- The whole setup works on the free plan with the Thumbnails layout.
What Visitors See When Your Gallery Has Pagination
On the front end, a row of numbered page buttons sits under the gallery. The current page is highlighted, with arrows for the previous and next page, and long runs of pages collapse into an ellipsis so the row stays short.
Here’s an 18-photo landscape gallery set to six photos per page, which gives it three pages.
Click 2, and the next six photos load in place of the first six. With AJAX pagination on, the page itself doesn’t reload.
This is Imagely’s default styling, and your theme can restyle the buttons to match the rest of your site.
Shorter pages help most on phones, where a long gallery means a lot of thumb-scrolling. A client can work through a full shoot one page at a time instead of scrolling one endless page.
Split Your Biggest Galleries Into Pages, Free
The free version of Imagely includes Images per page and AJAX pagination, so clients can browse a full shoot one tidy page at a time.
Which Imagely Layouts Support Gallery Pagination
The Images per page field appears on four Imagely layouts. Here’s each one and the plan it comes with:
- Thumbnail Gallery (free): the classic grid, and the layout used in this tutorial.
- Film Gallery (Starter and up): each photo sits in its own frame, for a more finished look.
- Thumbnail Grid Gallery (Plus and up): a grid with more control over how thumbnails display.
- Blog Style Gallery (Plus and up): photos in a single column, one after another.
Other layouts, like Masonry, Mosaic, Tile and the slideshows, show a gallery in their own way and don’t split into pages. When pages matter for a gallery, one of these four layouts is the one to pick.
For most client galleries, the free Thumbnail Gallery covers everything. Thumbnail Grid or Blog Style with pages can give a portfolio a more curated feel.
How to Animate Page Changes in Your Gallery Pagination
Pagination animations add a short transition each time a visitor changes page. The new set of photos animates in instead of simply appearing, which gives a client-facing gallery a more polished feel.
Animations come with Imagely Plus and above, alongside the Thumbnail Grid and Blog Style layouts above.
You can switch them on for one gallery with the Animate Pagination toggle in Customize Gallery Look. To set them for the whole site, go to Imagely » Settings » Image Animations and turn on Animate paginations under Pagination Animations.
From there, you pick an Animation style, with Flip in X as the default. The Animation duration (ms) and Animation delay (ms) fields start at 1500 and 250 milliseconds.
Here’s what flip and fade transitions look like on the front end when a visitor changes page.
Our docs on animating gallery pages show where to switch them on for a single gallery, and the gallery animations announcement shows more examples.
Animate Every Page Change
Imagely Plus animates each new page of photos and adds pagination to the Thumbnail Grid and Blog Style layouts.
Scroll Loading as an Alternative to Image Pagination
Some galleries feel better as one long scroll. In Imagely, the alternative to numbered pages is the Mosaic Gallery’s scroll loading, which our plans page calls Infinite Scrolling.
The Mosaic Gallery comes with Imagely Starter and above. In its settings, turn on Enable “lazy” image loading, then set Images to display at start and Images to load when scrolling.
Visitors get a full first screen of photos, and more arrive as they scroll. Our guide to lazy loading images explains how that works.
I’d pick pages for galleries clients work through carefully, and scroll loading for a portfolio people skim.
How to Set Default Gallery Pagination for New Galleries
If you want every new gallery to start with the same pagination, set it once at Imagely » Settings » Layout Settings and select Basic Thumbnails.
You’ll find the same Images per page and Enable AJAX pagination fields there. New galleries start from these defaults, and a gallery’s own setting still overrides them.
If you ever want to start over, the Reset to defaults link puts these fields back to their original values.
FAQs About WordPress Gallery Pagination
Is gallery pagination free in Imagely?
Yes. Images per page, AJAX pagination and the site-wide defaults all work on the free plan with the Thumbnail Gallery. Pagination on the Film, Thumbnail Grid and Blog Style layouts, and pagination animations, come with paid plans.
How many images per page should I use?
Imagely’s default of 24 is a sensible start. I’d pick a multiple of your column count so every row stays full, and go lower if most of your visitors browse on phones.
Can I set pagination in the Imagely block?
No, pagination lives on the gallery itself, in Customize Gallery Look. The block inserts the gallery, and the pagination you set comes with it.
Does the lightbox show photos from other pages?
Only if you turn on Add hidden images. The lightbox can then step through the whole gallery, though Imagely notes that this increases page load.
How do I turn gallery pagination off?
Set Images per page to 0 in Customize Gallery Look. The gallery then shows every image on one page.
Can I use infinite scroll instead of pagination?
Yes, with the Mosaic Gallery on Imagely Starter and above. Turn on Enable “lazy” image loading, and it adds photos as visitors scroll.
Splitting a big gallery into pages keeps it easy to browse, however many photos you deliver. Be sure to check out our post on making your WordPress photo gallery mobile-friendly to get the rest of your galleries ready for phones.
Don’t have Imagely yet? Get started today!
For more photography tips and WordPress tutorials, check out our blog.
