How do you limit a certain design to the first page only?

support
1

I am creating a list layout where the first two posts use a different design. I want to limit this design to the first paginated page only! How can this be achieved? Using after 2 in the range hides two posts in every paginated page after the first one.

2 
{{ $numFeaturedPages := 2 }}
{{ $paginator := .Paginate .Pages }}
{{ range $k, $v := $paginator.Pages }}
  {{ if and (lt $k $numFeaturedPages) (eq $paginator.PageNumber 1) }}
    {{ partial "posts/summary-featured.html" . }}
  {{ else }}
    {{ partial "posts/summary.html" . }}
  {{ end }}
{{ end }}
{{ template "_internal/pagination.html" . }}
3

Thanks Joe! But the way I am designing my site, the else part will not work since I will need to call the range twice. Here is an example of the design of the list layout I want. The first two posts should be featured only on the homepage, and full width, but the rest of the posts and the sidebar will share the other layout (with the pagination at the end of the other posts not featured).

4

Sorry, I don’t understand. The example looks like a grid issue:

  • Show two large on first row
  • Show three medium on next row, etc.
5

In the design I shared, I cannot use your code above as it is because the range will be called outside the grid and it messes up the layout. Basically, the code for the layout to generate the design I shared should look like below. What I want to know is what code is required so that, the second range is used both in the first page after the featured images and the subsequent paginated pages.

{{ $numFeaturedPages := 2 }}
{{ $paginator := .Paginate .Pages }}
<div class="mt-8 grid gap-8 sm:mt-10 sm:grid-cols-2 sm:gap-10">
  {{ range $k, $v := $paginator.Pages }}
  {{ if and (lt $k $numFeaturedPages) (eq $paginator.PageNumber 1) }}
  <div class="">
    {{ with .Resources.GetMatch "cover.*"}}
    <figure>
      <img src="{{ .RelPermalink }}" width="" height="" />
    </figure>
    {{- end }}
    <h2 class="">{{ .Title }}</h2>
  </div>
  {{- end }}
  {{- end }}
</div>
<div class="flex flex-col md:flex-row">
  <div class="grid pt-6 gap-4 md:grid-cols-2 lg:mr-6 lg:w-2/3">
    {{ range $k, $v := $paginator.Pages }}
    {{ if and (lt $k $numFeaturedPages) (eq $paginator.PageNumber 1) }} 
<!-- this 'if` part is what I want changed to cover the code after the `else` part in your code above-->
    <section>
      {{ with .Resources.GetMatch "cover.*"}}
    <figure>
      <img src="{{ .RelPermalink }}" width="" height="" />
    </figure>
    {{- end }}
    <h2 class="">{{ .Title }}</h2>>
    </section>
    {{- end }}
    {{- end }}
  </div>
  <div class="w-1/3 hidden lg:block">
    <h2 class="">SIDEBAR</h2>
    <!-- using `complement` with paginator to generate a list of similar posts to the current section in the list -->
  </div>
</div>

EDIT: I figured it out by duplicating the code 3 times (not sure if it is efficient)

{{ $numFeaturedPages := 2 }}
{{ $paginator := .Paginate .Pages }}
<div class="mt-8 grid gap-8 sm:mt-10 sm:grid-cols-2 sm:gap-10">
  {{ range $k, $v := $paginator.Pages }}
  {{ if and (lt $k $numFeaturedPages) (eq $paginator.PageNumber 1) }}
  <div class="">
    {{ with .Resources.GetMatch "cover.*"}}
    <figure>
      <img src="{{ .RelPermalink }}" width="" height="" />
    </figure>
    {{- end }}
    <h2 class="">{{ .Title }}</h2>
  </div>
  {{- end }}
  {{- end }}
</div>
<div class="flex flex-col md:flex-row">
  <div class="grid pt-6 gap-4 md:grid-cols-2 lg:mr-6 lg:w-2/3">
    {{ range $k, $v := $paginator.Pages }}
    {{ if and (gt $k 1) (eq $paginator.PageNumber 1) }} 
    <section>
      {{ with .Resources.GetMatch "cover.*"}}
    <figure>
      <img src="{{ .RelPermalink }}" width="" height="" />
    </figure>
    {{- end }}
    <h2 class="">{{ .Title }}</h2>>
    </section>
    {{- end }}
    {{- end }}
{{ range $k, $v := $paginator.Pages }}
    {{ if ne $paginator.PageNumber 1) }} 
    <section>
      {{ with .Resources.GetMatch "cover.*"}}
    <figure>
      <img src="{{ .RelPermalink }}" width="" height="" />
    </figure>
    {{- end }}
    <h2 class="">{{ .Title }}</h2>>
    </section>
    {{- end }}
    {{- end }}
  </div>
  <div class="w-1/3 hidden lg:block">
    <h2 class="">SIDEBAR</h2>
    <!-- using `complement` with paginator to generate a list of similar posts to the current section in the list -->
  </div>
</div>
6

If you want 8 pages per pager, is OK for the first pager to have 10 pages in total (2 with one design, plus 8 of a different design)? The remaining pagers would have 8 pages each.

Or, must all pagers have the same number of pages?

7

I need an even number of pages (preferably 10) per paginated page from page 2, but the first page can have a different number of posts.

8

I found a way of doing this. It involves a little trickery, but I will comment the sample code.

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

See layouts/posts/list.html

10

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