The list design in my test site was working well until I decided to try a new design with three columns for larger screens. Now, the posts are not even on first and subsequent pages. Is there a Hugo way to close these gaps? Ideally, I want 14 posts on page 1 (1 featured, 13 other) and 12 on the other paginated pages.
Kindly see the Home Alternate design in this theme (Under the Home dropdown menu). I am designing something similar that switches from one column, to two columns (768px) then 3 columns (1024px). I am looking at the number of posts that can fit that design in the first page (without leaving gaps when switching from three grid columns to two and vice versa), but the rest of the pages to remain at 12 pages.
not coded defensivly but should do the trick with fillup
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
<!-- Set constants. -->
{{ $numFeaturedPages := 2 }}
{{ $numPagesOnFirstPage := 14 }} <!-- also the size of the pager -->
{{ $numPagesPerPager := 12 }}
{{ $numDummiesPerPage := sub $numPagesOnFirstPage $numPagesPerPager}}
<!-- pregenerate the fillup pages -->
{{ $dummies := slice }}
{{ range seq $numDummiesPerPage }}{{ $dummies = $dummies | append site.Home }}{{ end }}
<!-- pages to paginate -->
{{ $toProcess := .Pages }}
<!-- pages of first page -->
{{ $p := $toProcess | first $numPagesOnFirstPage }}
<!-- all the rest -->
{{ $toProcess = $toProcess | after $numPagesOnFirstPage }}
<!-- number of pages to generate -->
{{ $loopCount := div (len $toProcess) $numPagesPerPager }}
<!-- now range ofer the pages (just a for loop) -->
{{ range seq $loopCount }}
<!-- fillup each page with dummies -->
{{ $p = $p | append $dummies }}
<!-- add current page set -->
{{ $p = $p | append ($toProcess | first $numPagesPerPager) }}
<!-- remove current page set from the ones to process -->
{{ $toProcess = $toProcess | after $numPagesPerPager }}
{{ end }}
<!-- we might have left some pages out (incomplete last page) -->
{{ if len $toProcess }}
{{ $p = $p | append $dummies }}
{{ $p = $p | append $toProcess }}
{{ end }}
{{ $paginator := .Paginate $p $numPagesOnFirstPage }}
{{/* First $numFeaturedPages pages of the root page collection. */}}
{{ if eq $paginator.PageNumber 1 }}
<pre>// BEGIN FEATURED</pre>
<div class="featured">
{{ range first $numFeaturedPages .Pages }}
<h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
{{ end }}
</div>
<pre>// END FEATURED</pre>
{{ end }}
{{/* The paginated page collection, skipping the dummy pages. */}}
<pre>// BEGIN THE REST FOR THIS PAGER</pre>
<div class="list-page">
{{ range after $numFeaturedPages $paginator.Pages }}
{{/* Skip the dummy pages. */}}
{{ if not .IsHome }}
<h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
{{ end }}
{{ end }}
</div>
<pre>// END THE REST FOR THIS PAGER</pre>
{{/* Navigation. */}}
{{ template "_internal/pagination.html" . }}
{{ end }}
Itās actually a bit simpler; no need to fill in the gaps.
layouts/posts/list.html
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{/* Set constants. */}}
{{ $numFeaturedPages := 2 }}
{{ $numPagesFirstPager := 10 }}
{{ $numPagesSubsequentPagers := 4 }}
{{/* Paginate the page collection excluding the extra pages on the first pager. */}}
{{ $paginator := .Paginate (.Pages | after (sub $numPagesFirstPager $numPagesSubsequentPagers)) $numPagesSubsequentPagers }}
{{/* Featured pages. */}}
{{ if eq $paginator.PageNumber 1 }}
<pre>// BEGIN FEATURED</pre>
{{ range first $numFeaturedPages .Pages }}
<h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
{{ end }}
<pre>// END FEATURED</pre>
{{ end }}
{{/* Extra pages for the first pagter. */}}
{{ if eq $paginator.PageNumber 1 }}
<pre>// BEGIN EXTRA</pre>
{{ range .Pages | after $numFeaturedPages | first (sub $numPagesFirstPager $numPagesSubsequentPagers $numFeaturedPages) }}
<h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
{{ end }}
<pre>// END EXTRA</pre>
{{ end }}
{{/* The paginated page collection. */}}
<pre>// BEGIN THE REST FOR THIS PAGER</pre>
{{ range $paginator.Pages }}
<h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
{{ end }}
<pre>// END THE REST FOR THIS PAGER</pre>
{{/* Navigation. */}}
{{ template "_internal/pagination.html" . }}
{{ end }}
But the OPās goal is still not entirely clear to me.
It would be perfect if it worked with two featured pages. But I am also open for the featured page to be 1. I already have the designs for both ready, what I donāt want is the gaps left by the grid system at the moment.
Yeah, I think the filler pages were necessary in an earlier iteration of the solution for the old issue. It went through a number of changes trying to get what the OP wanted.
So, I have been studying your code and I see that this number has to be equal to the total number of pages appearing in the first page, after the featured pages, otherwise it throws an error. Interestingā¦
numPagesSubsequentPagers is 4 and no other value matches that
there are 10 posts (incl. 2 featured posts) on the first page
and 4 on the rest of the pages.
the 4 filler on the first page are because 2 featured + 4 to the page lead to 4 added.
If you set numPagesSubsequentPagers to 5 there will be three filler pages.
In fact to code assumes that the number of pages on the first page is larger than the number of pages on the sbusequent pages - if not it breaks.
I suppose @jmooring implementation is just an improvement on my with the gaps and so based on my understanding on the requirement stated above.
maybe you could clarify the gap? sometimes a picture helps