Split long Galleries and Albums into smaller chunks so visitors aren’t loading every item at once. FotoGrids offers three pagination methods — endless scroll, a Load More button, and numbered page buttons — and lets you set different item counts for desktop, tablet, and mobile.
Location Gallery Settings → Pagination
Display Mode #
| Setting | Display Mode |
| Options | Break into Pages Show All Items |
| Default | Break into Pages |
Determines whether the Gallery or Album is paginated at all.
- Break into Pages — Only a single page of items is rendered on first load. Additional pages are fetched from the server as the visitor scrolls, clicks Load More, or selects a page number.
- Show All Items — Every item is rendered in the initial page response. No pagination chrome appears on the frontend.
If Break into Pages is selected but the total item count is less than or equal to the configured page size, pagination chrome is suppressed automatically — the Gallery or Album renders as if Show All Items were chosen.
Items Per Page #
| Setting | Items Per Page |
| Range | Desktop 1–100, Tablet 1–50, Mobile 1–30 |
| Default | Desktop 24, Tablet 18, Mobile 12 |
| Visible when | Display Mode is set to Break into Pages |
The number of items shown per page. The control is responsive — set a separate value for each breakpoint using the device tabs. The active breakpoint is detected at render time, so a phone visitor sees the mobile count even if the page was originally requested from a desktop session.
When sorting is set to Random, the same shuffle seed is reused across pagination requests so each item appears on exactly one page within a visitor’s session — no duplicates and no skipped items as more pages load.
Pagination Method #
| Setting | Pagination Method |
| Options | Endless Scroll Load More Button Page Buttons |
| Default | Load More Button |
| Visible when | Display Mode is set to Break into Pages |
Selects how visitors advance to the next page.
- Endless Scroll — A sentinel sits at the end of the visible items. When the visitor scrolls it into view, the next page is fetched and appended automatically. Best for casual browsing where the visitor doesn’t need to track position.
- Load More Button — A button appears below the Gallery or Album. Each click appends the next page of items below the existing ones. Best when you want a clear stopping point and an explicit visitor action between pages.
- Page Buttons — A numbered pager (
1 2 3 … 7 Next) appears below the Gallery or Album. Each click replaces the visible items with the requested page and scrolls back to the top. Best for reference Galleries and Albums where visitors may want to return to a specific page or share its URL.
All three methods request pages from the same REST endpoint and append (or replace) items in place — the surrounding page is never reloaded.
Load More Button settings #
The following settings appear when Pagination Method is set to Load More Button.
Button Text
| Setting | Button Text |
| Default | Load More |
The label shown on the button. Use this to localise the button, match a brand voice, or change it to something more descriptive (“Show next 24 photos”).
Full Width Button
| Setting | Full Width Button |
| Options | On Off |
| Default | Off |
When enabled, the button stretches to the full width of the container. When disabled, the button sizes to its label and is positioned by the Button Alignment setting below.
Button Alignment
| Setting | Button Alignment |
| Options | Left Center Right |
| Default | Center |
| Visible when | Full Width Button is off |
Horizontal placement of the button within the Gallery or Album container.
Page Buttons settings #
The following settings appear when Pagination Method is set to Page Buttons.
Pagination Alignment
| Setting | Pagination Alignment |
| Options | Stretch Left Center Right |
| Default | Center |
Horizontal placement of the whole pagination bar (Previous/Next buttons and page numbers together). Stretch spreads the buttons across the full width of the container; the other three options size the bar to its contents and position it on that edge.
Show Previous/Next Buttons
| Setting | Show Previous/Next Buttons |
| Options | On Off |
| Default | On |
Whether the Previous and Next buttons appear alongside the page numbers. Turn this off if you only want numbered page buttons and no separate prev/next controls.
Previous Button Text
| Setting | Previous Button Text |
| Default | Previous |
| Visible when | Show Previous/Next Buttons is on |
The label shown on the Previous button.
Next Button Text
| Setting | Next Button Text |
| Default | Next |
| Visible when | Show Previous/Next Buttons is on |
The label shown on the Next button.
Button Icon
| Setting | Button Icon |
| Options | None Chevron Double Chevron Arrow Narrow Arrow Square Arrow Circle Arrow Broken Circle Arrow Block Arrow |
| Default | Chevron |
| Visible when | Show Previous/Next Buttons is on |
Icon paired with the Previous and Next labels. The same icon set is shared with the Lightbox navigation arrows, so the pager and the Lightbox can be kept visually consistent. Choose None for a text-only pager.
Show Page Numbers
| Setting | Show Page Numbers |
| Options | On Off |
| Default | On |
Whether numbered page buttons appear in the bar. Turn this off for a Previous/Next-only pager.
Truncate Long Pagination
| Setting | Truncate Long Pagination |
| Options | On Off |
| Default | On |
| Visible when | Show Page Numbers is on |
When enabled, Galleries and Albums with many pages collapse middle pages into a … ellipsis so the bar stays compact — for example 1 2 3 … 12 13 14. When disabled, every page number is shown in a single row. Leave this on for collections with more than ten or so pages.
How pagination works on the frontend #
The first page of items is rendered server-side and arrives with the rest of the page HTML, so visitors see items immediately — there is no flash of an empty Gallery or Album on load.
Subsequent pages are fetched from the FotoGrids REST endpoint and inserted into the existing wrapper without reloading the surrounding page. Endless Scroll and Load More append new items below the existing ones; Page Buttons replace the visible items with the requested page and scroll back to the top.
When filters or random sorting are active, those choices are preserved across pagination requests — visitors continue seeing items that match the active filter, in the same shuffled order, as more pages load.
Pagination and the Lightbox #
Items on pages that have not yet been loaded are still reachable from the Lightbox. When a visitor opens an item and navigates past the items currently on the page, the Lightbox fetches the missing items from the server on demand, so a 200-item Gallery paginated 24 at a time can still be browsed end-to-end through the Lightbox without first scrolling through every page.
Pagination and SEO #
Pagination is a direct Core Web Vitals win. Instead of loading every item in one giant page response, the first page is rendered server-side at the configured size — 24 items on desktop by default — and arrives with the rest of the page HTML. This dramatically reduces initial payload size, speeds up Largest Contentful Paint, and lowers the total weight Google has to download to evaluate the page.
Search engines see the first page exactly as visitors do: real, server-rendered HTML with proper <img> tags, alt text, captions, and structured data. There is no JavaScript rendering required for Google to read and index the items above the fold.
For very large Galleries and Albums, pagination is the better SEO choice over Show All Items — a faster page is a better-ranking page.
More Pagination Options Pro #
FotoGrids Pro adds pagination capabilities beyond the built-in methods:
Preload Next Page — silently fetches the next page in the background while the visitor is still looking at the current one, so the next click feels instant.
Deep-Linked Pagination — paginated views update the page URL as visitors navigate, so every page of a Gallery or Album becomes a real, shareable, bookmarkable URL. Search engines can crawl and index items on every page — not just the first — for the broadest possible SEO coverage on large Galleries and Albums.
