hugo-theme-fuji
hugo-theme-fuji copied to clipboard
Is it possible to add a cover image to posts?
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,
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 :)