Show a different number of posts on first page

support
1

I just came across this topic. But I want a slight difference in the implementation. I use flex to show columns. One column for items in screens below 600px, 2 columns up to 992px, 3 columns up to 1200px and 4 columns from 1201px and up. I show 12 items per page. I want 11 items on the first page and 12 on the others since I only want the first item to occupy two rows rather than the whole row like in the linked example. The example above creates 10 posts on the first page instead. How to show 11 posts instead? cc @jmooring

2 
{{ $p := where site.RegularPages "Type" "post" }}
{{ $p = slice site.Home | append $p }}

{{ range (.Paginate $p 12).Pages }}
  {{ if not .IsHome }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

{{ template "_internal/pagination.html" . }}

Or, for a param driven implementation…

{{ $pagesPerPager := 12 }}
{{ $pagesOnFirstPager := 11 }}

{{ $p := where site.RegularPages "Type" "post" }}
{{ range seq (sub $pagesPerPager $pagesOnFirstPager) }}
  {{ $p = slice site.Home | append $p }}
{{ end }}

{{ range (.Paginate $p $pagesPerPager).Pages }}
  {{ if not .IsHome }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

{{ template "_internal/pagination.html" . }}
3

The first example works. Thank you.

4

Is there a way to include the category pages in this?

5

Change the where clause.

Please clarify your objective. Do you want to list all ‘posts’ and all term pages together?

6

No. Make the first page of homepage and category pages show 11 posts.

7

When you say “category” pages, do you mean the page that lists all categories (taxonomy template), or the page that lists all pages with a particular category (term template)?

8

This is the one. (My homepage and term pages share the same CSS file. So I would like to have a similar style for them)

9

layouts/_default/term.html

{{ $p := slice site.Home | append .Pages }}

{{ range (.Paginate $p 12).Pages }}
  {{ if not .IsHome }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

{{ template "_internal/pagination.html" . }}
10

That worked. The only challenge now is to limit the style that is stretching the first post to occupy two rows in the grid/flex to only the first page since it is being applied to the first post in every paginated page. This I guess is out of Hugo’s support, so I will ask in Stack Overflow and Reddit. I tried a hack but it only worked on the homepage and not on term pages.

11 
{{ $p := where site.RegularPages "Type" "post" }}
{{ $p = slice site.Home | append $p }}

{{ $firstPage := true }}
{{ range (.Paginate $p 12).Pages }}
  {{ if not .IsHome }}
    {{ $class := "" }}
    {{ if and (eq $.Paginator.PageNumber 1) $firstPage }}
      {{ $class = "first-page-on-first-pager" }}
    {{ end }}
    <h2{{ with $class }} class="{{ . }}"{{ end }}><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
    {{ $firstPage = false }}
  {{ end }}
{{ end }}

{{ template "_internal/pagination.html" . }}
12

I am assuming this adds a class that I can append to a CSS variable? I tried it as $class = "first-page" and .first-page .css-here but it didn’t work

13

In my example, the first item (page) on the first pager will look like this:

<h2 class="first-page-on-first-pager">...</h2>

allowing you to target the element as you requested.

If you are having difficulty targeting the element with CSS selectors, that’s a CSS problem, not a Hugo/jmooring problem.

14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.