Is it possible to add a cover image to posts?

[xanne3d]

Greetings,

Is it possible to define a cover image in the frontmatter such that the image shows in the list, similar to what we have in this theme:

https://themes.gohugo.io/themes/hugo-tranquilpeak-theme/

Thank you,

[vepain]

I tested several configurations for cover in front matter. I will take my personal example from this page : https://vepain.gitlab.io/posts/2022-12-13_avis_comets/ Note that the url of the cover is always an absolute path of the picture after the website was built (e.g. /posts/2022-12-13_avis_comets/2022-12-13_comets.png)

First try based on understood docs

Open graph

See https://gohugo.io/templates/internal/#open-graph

According to the config.toml file at the website root, I tested og key in post's front matter: Facebook still continue to use the global parameter og in config.toml.

Twitter cards

See https://gohugo.io/templates/internal/#configure-twitter-cards

I tried images key with the list of one absolute cover file path (based on public website path, reminder): still not working.

Working solution, perhaps not the best or correct one

According to the code in the file themes/fuji/layouts/partials/opengraph.html,

{{- if .Params.image -}}
<meta property="og:image" content="{{ .Params.image | absURL }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ .Params.image | absURL }}" />
...

I used image key with a single value: the absolute cover's path.

You can verify it on https://gitlab.com/vepain/vepain.gitlab.io/-/blob/main/content/posts/2022-12-13_avis_comets/index.md

Hope this helps you.

NB: I would like to better understand how it works, if there is someone to comment my solution :)