No feature image for social share

[R3dy]

Great Theme!!

hey sorry if this isn’t the right place for this. I didn’t see a link to a discord or anything.

I’ve created a simple blog using the theme https://blog.roycedavis.net/

when I try to share a link on Twitter I don’t see an image. Is it easy to set a feature image on posts or maybe the brand image from the nav to show up like most sites do when you share them out?

[lukeorth]

Hi @R3dy - I'm glad you're enjoying the theme!

Thank you for this suggestion. Someone else added support for this awhile back (called the Open Graph protocol), but I wasn't familiar with it at the time and didn't look into it very much. Finally decided to dive into it.

You can now add a feature image by creating an assets directory in the root of your project, adding images to it, and including their path in your post's frontmatter.

For example, this is the directory structure for my Poison demo site.

So I was able to enable a feature image by updating my frontmatter for the Introducing Poison post like so:

This post is now displayed on Twitter like this:

I hope this helps! Let me know if you run into any hiccups or have any questions. :+1:

[R3dy]

Hey @lukeorth would you mind looking at this at helping me spot what I'm doing wrong? I ran git pull today so I should definitely have this code (unless I'm wrong about that...)

So here you can see I have the path /content/images where all my images are stored.

royce@hacktop:~/hugo/roycedavis.net/content ‹main›
$ ls -lah images/post-image-001.jpg
-rw-r--r--  1 royce  staff   193K Jun 14 15:01 images/post-image-001.jpg

And then here is a post where I call that image in the front matter.

royce@hacktop:~/hugo/roycedavis.net/content ‹main›
$ head posts/smarter-than-an-ai.md
---
title: "Are You Smarter Than an AI"
date: "2023-06-14"
image: "/images/post-image-001.jpg"
---

However I'm still not seeing the feature image on social media.

[lukeorth]

Hey, @R3dy -- I'm sorry to hear it's not working for you. I think I know how to fix it though.

In order for Hugo to pull the images, they need to be placed in a directory called assets at the root of your project. If you don't already have that directory (it's possible you don't) then you'll need to create it and put your images there. You can create subdirectories within assets too if you want more organization, meaning you could store your image at a location like assets/smarter-than-ai/post-image-001.jpg. But it won't work if your images are stored in the content or static directories.

Also, because it's required that your images be in assets, you don't need to include that directory name in your front matter's image path. So an image stored at /assets/smarter-than-ai/post-image-001.jpg would be referenced in your front matter like this:

---
title: "Are You Smarter Than an AI"
date: "2023-06-14"
image: "smarter-than-ai/post-image-001.jpg"
---

I hope that helps! Let me know if you have any more issues though.