Yay! It works! ❤️

Add a Thumbnail and a Header-Image to a Blogpost using the Hugo-Academic Theme and blogdown

If you use the blogdown package to generate blog posts, you will notice that the suggested workflow differs slightly from the workflow proposed on the Hugo-academic website. Using blogdown, it is not obvious how to obtain a thumbnail and a header image (possibly different) for your post. Below, I explain how to achieve this.

Thumbnail Image

  • Call the image featured.jpg and save it in the directory of the post.
  • Rename the post markdown file index.Rmd.
  • Add the following to the yaml header:
  caption: ''
  focal_point: ''
  preview_only: yes

If you want this image to also be the header image, set preview_only: no.

Header Image

If you want a header image that is different from the thumbnail image:

  • Save the image (using a name of your choice) in static/img/headers
  • Add the following to the yaml header:
  image: "/headers/my-image-name.jpg"
  caption: "Yay! It works!"

In-post Image

Within the body of the blog text, you can use Addin - Insert image in RStudio to insert an image. The resulting code will look something like this:


Your post now has an image:

Behind the scenes, the addin does some work for you:

  • It copies the target image to the appropriate location (some sub-folder of static).
  • It uses the correct directory-name in the image-link.
  • You can specify height and width of the image (for HTML output only).

Always use Addin -> Insert image.

Pierre Hoonhout
Associate Professor in Econometrics

My research interests include panel data, panel data attrition, missing data, causal inference, policy evaluation, response based sampling and reproducible research using R and Stata.