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

**URL:** <https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891>\
**Category:** support\
**Created:** [June 20, 2023, 3:10pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891 "2023-06-20T15:10:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [June 20, 2023, 3:10pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/1 "2023-06-20T15:10:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 20, 2023, 4:18pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/2 "2023-06-20T16:18:51Z")

</div>

```auto
{{ $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" . }}

```

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [June 20, 2023, 5:40pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/3 "2023-06-20T17:40:30Z")

</div>

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](https://play.tailwindcss.com/Fk8jqXgxg0?layout=horizontal) 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).

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 20, 2023, 5:46pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/4 "2023-06-20T17:46:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [June 20, 2023, 6:13pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/5 "2023-06-20T18:13:34Z")

</div>

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.

```auto
{{ $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)

```auto
{{ $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>

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 20, 2023, 11:31pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/6 "2023-06-20T23:31:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [June 21, 2023, 12:20am UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/7 "2023-06-21T00:20:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 21, 2023, 12:21am UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/8 "2023-06-21T00:21:25Z")

</div>

> [@jmooring](#):
>
> Or, must all pagers have the same number of pages?

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 21, 2023, 12:25am UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/9 "2023-06-21T00:25:15Z")

</div>

```plaintext
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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [June 23, 2023, 5:29pm UTC](https://discourse.gohugo.io/t/how-do-you-limit-a-certain-design-to-the-first-page-only/44891/10 "2023-06-23T17:29:48Z")

</div>

Closed on June 23, 2023, 5:29pm UTC

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