Hugo json photo album pagination multi-page

support
1

Hello
I have a question that might be quite a novice one.

I have a JSON file that has three things for each item and with that, I create a photo album.

"link": "https://photos.app.goo.gl/i64TdnsX7mdVE1jf8",
"img_src": "/images/travel/2002-yosemite.jpg",
"title": "2002 Yosemite"

Now I want to create pagination or multiple pages which will only load when users ask for more.

By default, I would like to load only the top 12 so that the page does not become too long.

this is the code I create content now.

	{{ $url := "bird_wildlife.json" }}
	{{ $gistJ := getJSON $url}}
	<div class="blog-post section has-text-justiitemfied" prop="articleBody">
		<p>
		<div class="columns is-mobile is-multiline is-centered is-vcentered">
		  {{ range $gistJ }}
		  <div class="column is-one-quarter-desktop is-half-tablet is-half-mobile">
			  <div class="card">
				  <div class="card-image">
					  <figure class="image is-1by1 zoom">
						<a href="{{ .link}}"><img loading="lazy" src="{{ .img_src }}" alt="{{ .title }}"></a>
					  </figure>
				  <footer class="card-footer is-hidden-touch">
					  <a class="card-footer-item" href="{{ .link}}">
						  {{ .title }}
					  </a>
				  </footer>
				  </div>
			  </div>
			</div>  
	  <!-- end of col -->
			{{ end }}  
		</div> <!-- end of text colmuns -->
			
	</p>		
		</div>
2

Hugo’s Pagination accepts only regular pages. It does not work with data files.

There are techniques floating around in the forum and on GitHub about generating Pages from a Data file, like for example this one.

Also there are open issues on GitHub, that you may want to follow: #5074 and #6310.

1 Like
3

Well, I figured out some way to do the same. very basic and rusty.

You can see the working one here.

Got the idea from hugo-forum-topic-29161

I split my JSON file by hand, and then I modified the multipage layout
used bunch of

if
else- if
else

Loop.

Well, it works but I am not happy at all with this situation as there are too many manual steps yet :cry: