How to add related content to casper theme

1

Hi everyone
i started using the casper theme for hugo lately and i would like to add a related content widget to the theme there is already a widget tha shows previous and next articles in a card style wich can be found here https://github.com/eueung/hugo-casper-two/blob/master/layouts/partials/readnext-article-sori.html
and i want to use the same style but instead of showing next/previous articles shows 2 related content

2

Hi @SamHamou

that all looks pretty easy – have a think about the code examples a few of us gave you in the last week …

If I remember … it uses RANGE to retrieve a list of ALL YOUR POSTS and then it shows the FIRST 3 posts (hint this query is for 3 new posts)

Also Google is your friend here … for example: on my own site I have written about Related Posts

1 Like
3

Hi damien, i actually made it work but the content was shown as a list and that’s not what i wanted, i want the content to have a card style the partial responsible for that ( the card style ) is located here https://github.com/eueung/hugo-casper-two/blob/master/layouts/partials/readnext-article-sori.html and it’s called here https://github.com/eueung/hugo-casper-two/blob/master/layouts/_default/single.html with this next/previous code {{with .NextInSection}}
{{ partial “readnext-article-sori” . }}
{{end}}
{{with .PrevInSection}}
{{ partial “readnext-article-sori” . }}
{{end}}

i tried calling that partial but it didn’t work

4

@SamHamou sounds like you need to review the CSS styles used - review the tools / tips / documentation for the Casper theme

you shouldn’t need to call the partial - just need to apply the style

5

after a couples of tries i succeed on making it work and use the partial responsible for the card style if anyone is looking for the same thing here is the code from my website

 {{ range first 2 ( where (.Site.RegularPages.Related . ) "Permalink" "!=" .Permalink ) }}
  <ol class="post-card post"> 
    <div class="post-card-content">
      <a class="post-card-content-link" href="{{ .Permalink }}">
          <header class="post-card-header">
               {{if .Params.categories  }}<span class="post-card-tags">{{ range  $index, $tag := .Params.categories  }}
              #{{$tag}} {{end}} </span>
              {{ end }}
              <h2 class="post-card-title">{{.Title}}</h2>
          </header>
          <section class="post-card-excerpt">
              {{ if .Description }} 
                <p>{{ .Description | markdownify }}</p>
              {{else}}
                <p>{{ .Summary | plainify | safeHTML | truncate 190}}{{ if .Truncated }} ... {{end}} </p>
              {{end}}
          </section>
      </a>

      <footer class="post-card-meta">
          <img class="author-profile-image" src="{{ (.Params.authorAvatar | default .Site.Params.authorAvatar) | absURL}}" alt="Author" />
          <span class="post-card-author"><a href="/">{{.Params.author | default .Site.Params.author}}</a></span>
      </footer>
    </div>
  </ol>
  {{ end }}

the problem now is that i don’t know if this code is showing really related content or just the next content in the feed

6

Good Job @SamHamou

you can tell its finding related content becuase of the query

range first 2 ( where (.Site.RegularPages.Related . )

Also read up on the Hugo Docs … for example:

1 Like