How to create an image preview for a post in hugo-academic from .Rmd?

Question

I'm trying to add an image preview to a post using hugo-academic and compiling from .Rmd with blogdown, and I can't figure out what to do in the YAML preamble.

Some related posts that have not provided a solution include:

-Include image preview in blogdown (.Rmd yaml header)

-How to add feature or thumbnail image for post in .Rmd file

Hugo-academic wants this in a TOML preamble:

---
[header]
image="path"
---

According to the blogdown book, this is a table in TOML. But square brackets appear to be flow control operators in YAML, and escaping them with backslashes stops the complaints about compiling but does not result in the desired behavior; image: "path" is apparently ignored as any string can be substituted for "path" without change in behavior. At least bookdown is putting the image in the right place in public/img/headers.

So what am I missing? How do I get an image preview for a post in hugo-academic when starting from .Rmd?

Answer 1

What is with [] in a toml header can be added without bracket in yaml but following parameters are indented.
In your case, with academic theme, a YAML header need to be written as follows (Remember that the path is relative to static/img/ folder):

---
title: "Posts"
date: 2017-01-01
math: false
highlight: false
header:
  image: ""
  caption: ""
---

The getting-started file of the exampleSite saved as a Rmd file would have the following YAML header (I tested it and it works):

---
date: 2016-04-20
lastmod: 2017-09-03
draft: false
tags: ["academic", "hugo"]
title: "Getting started with the Academic framework for Hugo"
math: true
summary: "Create a beautifully simple personal or academic website in under 10 minutes."
header:
  image: "headers/getting-started.png"
  caption: "Image credit: [**Academic**](https://github.com/gcushen/hugo-academic/)"
---

Answer 2

I'm having the same issue with Hugo-Academic theme and the above solution doesn't work for me.

This is my YAML header for my .Rmd file and my pizza.jpg is in static/img/ folder.

As you can see there is no preview image displayed:

However, you do see this image within the project:

How can I properly get image previews working with the academic theme?

You can check out my repo (https://github.com/moldach/moldach.github.com) if you want... but I tried to provide enough information here for posterity-sake as it will change in the future.

Please note: the image previews for the projects next to the "Getting Started with..." project are only working because they are links to external websites in .md not .Rmd

SOLVED:

Okay, so the error was you need to have preview_only: (not image_preview:) and pay attention to the proper indentation (2 space bar hits) under image:.

Make sure that you have the Rmd and the preview image (named either featured.jpg/featured.png sitting in the project folder in it's one subfolder like this:

Probably best to copy-paste as YAML is fussy with proper spacing:

---
title: 'Shiny Dev and Software Release Cycles and Rayshader, Oh My!'
summary: ''
author: "Matthew J. Oldach"
tags: []
categories: []
date: "2019-11-23"
featured: false
draft: false

# Featured image
# To use, add an image named `featured.jpg/png` to your page's folder.
# Focal points: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.
image:
  caption: ""
  focal_point: ""
  preview_only: true

# Projects (optional).
#   Associate this post with one or more of your projects.
#   Simply enter your project's folder or file name without extension.
#   E.g. `projects = ["internal-project"]` references `content/project/deep-learning/index.md`.
#   Otherwise, set `projects = []`.
projects: []
---

Answer 3

The only thing that work for me regarding your question was to rename the .rmd file as index.rmd. That solved all my issues ;-)