banner image for blog posts

[tiffena]

Hello, new user here. Just installed the theme and really love the side TOC that provides much needed context. Thanks for your work!

I wonder how I can enable a banner image for each blog post? An example is the white banner just before the body content in the following screenshot:

I have already set the image: "image.png" in post frontmatter but it still doesn't work. I also attempt to share page link via social media and only my site avatar is used.

Thanks!
TK

[jamesericdavidson]

Hey @tiffena,

Gokarna doesn't support a banner image. image is used for social media cards, as mentioned in our docs: https://gokarna-hugo.netlify.app/posts/theme-documentation-advanced/#image-preview

You can emulate a banner image with Markdown syntax, or the Hugo figure shortcode:

https://www.markdownguide.org/basic-syntax/#images-1
https://gohugo.io/shortcodes/figure/

[tiffena]

thank you for your reply! When I share my post in social media, I notice it doesn't grab the image either. Instead, the site avatar is used.

[mansoorbarri]

thank you for your reply! When I share my post in social media, I notice it doesn't grab the image either. Instead, the site avatar is used.

what does your posts' frontmatter look?

[yashmehrotra]

@tiffena

For your usecase, you can add it to frontmatter like this

---
title: "Post title"
date: 2025-01-01
type: post
image: "/images/image.png"
description: "description for social media"
---

# Post

Content ...

[jamesericdavidson]

Note that the image path works as follows, per https://gokarna-hugo.netlify.app/posts/theme-documentation-basics/#avatar-url:

Images are typically placed into the assets/ or static/ directories (which are copied to the top-level directory at build time).

Therefore, an image in static/images/img.png or content/mypost/img.png should be given as /images/img.png or /mypost/img.png respectively.