Search code examples
hugoblogdown

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


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?


Solution

  • 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/)"
    ---