Yay! It works! ❤️

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

Last updated on Sep 23, 2019 2 min read

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:

image:
  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:

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:

![](/img/my-image-name.jpg)

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.