Hugo Posts With Featured Images

Last week I spent quite a bit of time messing around with implementing featured images on my blog. The main problem I was having was getting the featured image to display in the link preview on social media sites. Mainly the problem was with Twitter and Facebook. LinkedIn for some reason was showing the images while the other two were not.

After some random tinkering I figured some things out. I don’t know if it is optimal or Hugo best practices but it does work for me.

Background

What I started doing recently was keeping my images in page bundles for each post. As I understood matters I needed to use page bundles to take advantage of Hugo image processing. So, I made a directory for each post and an image sub-directory for the images for just that post.

Hugo Images in Static Directory

The alternative, which I had used in the past is to put the images in the /static/img/ai directory at the root of the site. After seeing my tinkering start to pay off I moved all the images back to /static/img/ai. Then removed all the individual post directories and just had post-name.md files in my blog directory. Back to pretty basic Hugo.

Where my images are now:

/static/img/ai/featured-example.jpg

Hugo Image Processing and Static Directory

Ah, the simplicity of having all the post images in one place. With the change though came a potential problem. Lack of image processing. Likely due to my own ignorance I thought I needed Hugo image processing to get images to show up at different scales in different sizes of screens.

More by sheer dumb luck than anything after I moved back images to /static/img/ai I decided to see how the posts with pictures looked on my iPhone.

Yay! They looked fine! On my iPad, too. So no worrying about 1000 pixel images taking up valuable reader screen space.

All I needed to do was put a figure tag with the link in the post body. Like so:

{{< figure src="/img/ai/feature-example.jpg" width="75%" alt="alternative text" title="Title with image generator credit -- misunderstood super hero creating digital pictures" >}}

Hugo Featured Images and Link Previews

My original problem though wasn’t fixed. Images were still not appearing on social media link previews.

What I did next looks redundant but it worked. For Facebook. In the post front matter I put the following:

....
images: 
    - /img/ai/feature-example.jpg
....

Hugo Twitter Card

Ta da! Images show up in the link previews for Facebook. What about Twitter link previews? One more step.

The Hugo short code for Twitter Cards:

{{ template "_internal/twitter_cards.html" . }}

Adding the built in Twitter card partial to the head section and Twitter shows a preview image with posted links. In my theme there is a custom_header.html file. Which is where I put the above code.

Take a look at your theme documentation if link previews aren’t working for you. You may just need to add a line to your config.yaml. Or maybe do something like I needed to do.

Really, getting the link previews working wasn’t difficult. I just didn’t understand what need to happen. Not needing to use page bundles to get the effect I want my site is much simpler for me to maintain, too. Though I might consider additional directories inside of /static/img/ai if keeping everything in one spot becomes unwieldy.