"Paginate" over resources?

I have a portfolio section on my website whose structure is basically just some images in a folder:

content/
├── portfolio/
│   ├── _index.md
│   ├── item1.svg
│   ├── item2.svg
│   ├── item3.svg
│   ├── ...
│   ├── item15.svg

I’d like to show only the first ten, and have a pagination menu for the next ones. Pagination does not work for .Resources. My first thought is to range over the first few, but I’m left with how to create the next pages.

Perhaps there is a way to get HUGO to view the .SVGs as pages that can then be paginated?

I would recommend making a page bundle for each SVG. Then you could paginate as normal.

Yeah, I was hoping to avoid doing that, as I rather like just dumping SVGs into a folder and calling it done.

You have the function first that could take a “slice” from the ressources. Then maybe on subsequent pages take (page-1)*n first items and remove them from the ressources array until it’s empty.

The problem I see is that it won’t be easy to give those “paged” ressources a URL.

You could try to do some kind of JS managed thing where you show 10 items and hide everything over this amount and show it per JS.

1 Like