How to implement pagination in data pages

support
1

I am currently building a gallery section using URLs served from a json file. I just found this much easier. and rendering them as cards.

i have a few concerns and questions.

  1. Is pagination possible on JSON data?
    Like if I want to limit certain images on a page not to crowd it.

  2. Is there a better way to do this?

here’s the repo

the json is in /data/gallery.json
the pagination is needed in layouts/section/gallery.html

(PS: using posts to render something else so that isn’t an option)

2

Hugo’s pagination feature is limited to content pages, but you might consider a JavaScript approach.

I would strongly consider the following structure:

content/
└── photo/
    ├── photo-1/
    │   ├── a.jpg
    │   └── index.md
    └── photo-2/
        ├── b.jpg
        └── index.md

content/photo/photo-1/index.md

+++
title = "Photo 1"
date = 2021-05-23T09:37:53-07:00
draft = false
filter = "Tejas"
+++

Benefits:

  1. You can leverage Hugo’s pagination capabilities.
  2. Each image becomes a page resource, allowing you to resize, fit, fill, rotate, apply filters, convert to WebP, extract EXIF data, create variants, etc.
1 Like
3

Okay will try this method and get back. Thank you!

4

I arranged my photos as you’ve shown me to, can you please tell me how I can reference this for pagination? the documentation didn’t help me a lot.

5

Please push your changes to your repository.

6

very sorry, i just did. Im using two types of content here, in a way. one, I’m using to render student cards and the other I want to render the gallery. andI want them to be separately rendered and yet have pagination etc. kindly let me know what I can do :slight_smile:

7

Pagination is available for any sort of data (page collection, data array etc…). But the .Paginate method is only available on list page template.

So even thouth you cannot produce permalinks for said data pages, you can paginate their listing.

8

Try this:

git clone --single-branch -b hugo-forum-topic-33040 https://github.com/jmooring/hugo-testing hugo-forum-topic-33040
cd hugo-forum-topic-33040
hugo server

Then visit http://localhost:1313/photo/ to view the paginated gallery.

The template for the paginated gallery is layouts/photo/list.html.

9

I was mistaken. While only list template can Paginate and they can paginate any pages (not necessarily their own), only Pages can be paginated.