How to create a teaser with alternative text/pictures for landing page?

support
1

Hy there,

I use Hugo for my Photoblog and am pretty happy how things work. However, I stumbled upon a limitation, either of my Hugo-Skills or of Hugo itself:

My goal is to have a rather clean landing page for my blog (c.f. https://holger.tk). Only the headline and one selected photo should be displayed for each post.

I know that I can use <!--more--> to split a blog entry in two halves. When clicking on “read more”, I get the entire blog post. However, this limits me to either put the nicest picture on top, which breaks the chronological order; or I need to show the chronologically first picture on the landing page, which is not necessarily the nicest.

Is there some feature/workaround/… that allows me to specify content that is shown on the landing page only? After clicking on “read more”, the actual post is then displayed without repeating the teaser?

+++
title = "A highly interesting post"
date = "2017-05-01"
type = “post”
+++

!pix](/photos/foo/picture_3.jpeg)
<–start–>

Text text text …

!pix](/photos/foo/picture_1.jpeg)

!pix](/photos/foo/picture_2.jpeg)

Text text text …

!pix](/photos/foo/picture_3.jpeg)

!pix](/photos/foo/picture_4.jpeg)
2

Not really a workaround, but I’m also not sure sure this is exactly what you’re asking…

But why not just add a description field to your content front matter and then write that to your homepage listing using the .Description page variable?

3

That is an interesting approach. I will look into this and report later… Thanks!

4

You could put something like this in your frontmatter:

+++
featured-image ="/photos/foo/picture_3.jpeg"
+++

And then in your list template:

`{{ if isset .Params “featured-image” }}

{{ end }}`
5

Thank you so much. I got what I needed and learned a bit. Brilliant!

<article>
  <header>
    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
    {{ partial "post_meta.html" . }}
  </header>

  {{ if isset .Params "featured_image" }}
    <p>
      <img src="{{ .Params.featured_image }}">
    </p>
    {{ if isset .Params "featured_text" }}
      <p>
        {{ .Params.featured_text }}
      </p>
    {{ end }}
  {{ else }}
  <p>
    {{ .Summary }}
  </p>
  {{ end }}


  {{ if .Truncated }}
  <footer>
    <a href="{{ .RelPermalink }}">Read more<i class="fa fa-angle-double-right fa-fw"></i></a>
  </footer>
  {{ end }}
</article>
2 Likes
6

PS: if you are interested, have a look here: https://ho1ger.tk/techposts_md/2017-05-12-photo_features/