Search code examples
rhugoblogdown

Include image preview in blogdown (.Rmd yaml header)


I have tried a couple of approaches but none worked so far. I want to include an image preview for a blog post written in R markdown (.Rmd) on my main blog page where a number of posts and projects are generally shown. I can make it work in plain markdown (.md) using below code taken from the Hugo academic-theme here

+++
# Optional image to display on homepage (relative to `static/img/` folder).
image_preview = "bubbles.jpg"
+++

The result would look as shown here (see section Projects).

However, I do not know how to translate this to the .Rmd yaml in my blog post. I can include an image at the top using below but since I'm using a toc table of content option, the image is only shown after the toc and thus does not appear in the post preview on the main page.

---
title: some title
author: some author
date: 'some date'
slug: some-slug
categories:
  - some category
tags:
  - some-tag
output:
  blogdown::html_page:
    toc: true
    number_sections: true
    toc_depth: 2
---

![](/post/img/some_img.png)

Ideally, the image is only shown in the preview on the main page and not in the actual blog post (intention is to "lure" the reader with visually appealing image to actual content) but if not possible otherwise I'm also fine if the image shows on top of the actual post as long as it shows in the preview of the main page.


Solution

  • If the image_preview parameter works with the md document, it should also work with the Rmd one, provided that you use the syntax with : I guess:

    ---
    title: some title
    author: some author
    date: 'some date'
    slug: some-slug
    categories:
      - some category
    tags:
      - some-tag
    output:
      blogdown::html_page:
        toc: true
        number_sections: true
        toc_depth: 2
    image_preview: 'bubbles.jpg'
    ---