Add Featured Image for Social Media share

[eflegara]

Hi, I’m not sure how I can add a featured image on all my posts using the Book theme. With Hugo Academic, it’s straightforward; i.e., the theme has explicitly added the feature. The intent is when I share a post from Hugo (using Book theme), the thumbnail will show a featured image instead of a blank one.

Thank you.

[Hash_Borgir]

Hi. How’s it going? If I understand your problem correctly (I might not):

The book theme seems to be using the default internal/opengraph.html template: https://github.com/alex-shpak/hugo-book/blob/master/layouts/partials/docs/html-head.html

The internal template functions like this:

For the og:image tag, it first tries to use .Params.images, and that is not there, then it defaults to .Site.Params.images

So perhaps you might need to simply define an images array in your article front matter.
For example:

---
author: "Michael Henderson"
date: 2014-09-28
linktitle: Creating a New Theme
menu:
  main:
    parent: tutorials
next: /tutorials/github-pages-blog
prev: /tutorials/automated-deployments
title: Creating a New Theme
weight: 10
images: 
    - /path/to/image1
    - /path/to/image2
---

Etc.

Otherwise to have a default og:image for all articles, you can specify that in your site’s global config file. Format would be the same.

/path/to/image is relative to your baseURL, as the internal template will pipe it through absURL

If you mean something like a “Hero” image on top of all the pages or page thumbnail, you’d have to add that in yourself to the single.html templates.

You would read images again from article front matter, which would be something like with .Params.images etc. etc. and they would go into the html in your list.html templates

Check out the _internal_opengraph.html template to see how images are pulled from article front matter and echo’d out into the html.

[eflegara]

Thank you! This works!