Modifying Homepage Sections and Featured Image in Pehtheme-Hugo

support
1

Hello, I’m trying to modify the homepage of the theme I’m using, which I downloaded from this GitHub link: https://github.com/fauzanmy/pehtheme-hugo.

I want to make some changes to the “Feature Post by Tag” and “Category Post” sections in the home.html file.

The home.html code is as follows:

{{ define "main" }}

<!-- Feature post by tag = "feature" -->

{{- range where .Site.RegularPages "Params.tags" "intersect" (slice "feature" ) | first 1 -}}
<section class="block md:flex relative group p-6 lg:p-10 space-y-6 md:space-x-6 my-14 bg-zinc-100 rounded-3xl hover:bg-blue-100">
  <figure class="basis-1/2 w-full aspect-video overflow-hidden rounded-2xl border">

    {{- if .Params.image }}

      {{- if (strings.HasPrefix .Params.image "http") }}

        <img class="object-cover group-hover:scale-105 transition duration-500 cursor-pointer" src="{{ .Params.image }}" alt="{{ $.Name }}" style="width: 100%; height: 100%; object-fit: cover;">

      {{- else }}

        {{- with $imgfeature := resources.Get .Params.image }}
          {{ $imgfeature := $imgfeature.Resize "720x Q85" -}}
          <img class="object-cover group-hover:scale-105 transition duration-500 cursor-pointer" src="{{ $imgfeature.Permalink }}" alt="{{ $.Name }}" width="{{ $imgfeature.Width }}" height="{{ $imgfeature.Height }}">
        {{- end }}

      {{- end }}

    {{- end }}

  </figure>
  <div class="basis-1/2 self-center">
    <h2 class="text-2xl md:text-3xl lg:text-5xl font-bold mb-4"><a class="before:content-[''] before:z-10 before:top-0 before:right-0 before:left-0 before:bottom-0 before:absolute before:pointer-events-auto" href="{{ .Permalink }}">{{ .Title}}</a></h2>
    <time datetime="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"><span class="font-bold">{{ .Date.Format "Jan 02, 2006" }}</span></time>
  </div>
</section>

{{ end -}}

<!-- / End feature post  -->

<!-- Category Post -->

<section class="mb-16">

    {{ $cat := "astronomy" }}

    <div class="flex items-center mb-6">

      <h2 class="text-3xl md:text-4xl font-bold mr-auto">{{ $cat | humanize }}</h2>

      <a class="border rounded-full py-2 px-4 md:px-6 hover:bg-blue-100" href="{{ printf "/categories/%s" $cat | absURL }}">View All</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-10">

    {{ range where .Site.RegularPages "Params.categories" "intersect" (slice $cat ) | first 3 }}

      {{- partial "content/card" . -}}

    {{ end }}

    </div>

  </section>

<!-- / End category post --> 
<hr class="my-8">
<!-- Start recent post  -->

  <section class="mb-16">

    <div class="flex items-center mb-6">

      <h2 class="text-3xl md:text-4xl font-bold mr-auto">Recent Post</h2>

    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-10">

    {{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections) }}

    {{ range $paginator.Pages }}

      {{- partial "content/card" . -}}

    {{ end }}

    </div>

    <!-- Paginate here -->

    <div class="flex items-center mt-10">
      {{- if $paginator.HasPrev -}}
        <a class="border rounded-full px-6 py-2 hover:bg-zinc-200 mr-auto" href="{{ $paginator.Prev.URL }}">← Previous</a>
      {{- end -}}

      {{- if $paginator.HasNext -}}
        <a class="border rounded-full px-6 py-2 hover:bg-zinc-200" href="{{ $paginator.Next.URL }}">Next →</a>
      {{- end -}}
    </div>

  </section>

<!-- / End recent post  -->

  {{- partial "content/newsletter.html" . -}}

{{ end }}

These two sections appear not only on the homepage but also on paginated pages, which I do not want.

Secondly, the featured image is set by default based on the tag. How can I modify it to display a random post instead?

2

If you move that line to the very top of your layout file you can hide things on all subsequent pages (page 2, page 3, etc) via this:

{{- if compare.Lt $pagination.PageNumber 2 -}}
something that you can see only on page number 1 (the home page)
{{- end -}}

Basically AFTER you had the $paginator line above you can start checking which page of the pagination you are on.

1 Like
3

I just realized that you are asking two questions in one post… Please keep it at one topic per post so the answers don’t go lost. That question is very generic though… Maybe explain a little bit more with code samples what this is about. A featured image should always be related to the post it is in. There is nothing that would make random images have sense…

1 Like
4

ok thank you david …my bad

regarding the first question let me check and test it out …