Adding featured images to posts

Inspiration for this post

When I updated my website to the latest version of Hugo Academic a few months ago, I realized that I could add featured images to all of my blog posts. I was very excited about this, but none of my tinkering with the YAML of the RMarkdown could produce an image. After some digging, however, I was able to find how to format my files properly so the Academic theme worked to create the images.

Folder structure

Hugo Academic follows a particular folder structure and naming conventions. When I am adding or editing blog posts, for example, I do that within the /content/post folder. Inside that folder, there is a _index.md file with a YAML header, and then an array of posts. You can put the .Rmd or .md files directly inside post, so the file path would look something like /content/post/my_post.Rmd. If you use blogdown to create posts from within RStudio, those posts will be created inside the post folder in that way by default.

In order to set up your post to use a featured image, however, you want the post inside a subsequent folder, like this /content/post/my_post/. Within that folder, call your post index.Rmd (or index.md if it is a Markdown file). Then, you can add the image you want to that same folder and name it featured.png / featured.jpg, etc.

So now you have a set-up like this within /content/post:

├── post
│   ├── my_post
│   │   ├── featured.png
│   │   ├── index.Rmd
│   │   └── index.html
    └── _index.md

YAML header

The final step is to modify the YAML header of your post (in index.Rmd) to display the featured image as desired. Add the following to the YAML header:

image:
  placement: 1
  caption: 'Your caption here.'
  focal_point: ''
  preview_only: false

In Hugo Academic, the placement options are as follows: 1 = Full column width, 2 = Out-set, 3 = Screen-width (with 1 being the default). The focal point options are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight, although I haven’t played with those much.