dsrkafuu / hugo-theme-fuji

A minimal Hugo theme with nice theme color. | 一个主题色极简 Hugo 主题。
https://github.dsrkafuu.net/hugo-theme-fuji/
Apache License 2.0
367 stars 97 forks source link

Is it possible to add a cover image to posts? #93

Open xanne3d opened 1 year ago

xanne3d commented 1 year ago

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 commented 1 year ago

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 :)