Include and size local images from local directory into Xaringan (remark.js) presentation ... (using via Rstudio on mac)

Question

I want to include images/material from local directory into a Xaringan remark.js presentatio and size them. I'm doing this via Rmd/Rstudio on a mac. I want to be able to customise the size with a macro as suggested in Yihui's docs

The suggested macros to size this do not work for me.

Adding the line:

.center[![trachoma](picsfigs/trachoma.jpg)]

works fine, but adding beforeInit: "macros.js" and adding the macros to that file knitting yields a blank presentation

---
title: "A Cool Presentation"
output:
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts]
    seal: true
    self_contained: true
    yolo: false
    beforeInit: "macros.js"
    nature:
      autoplay: 30000
---

- Hello world 

---

--- 

# new slide??

This works:


.center[![trachoma](picsfigs/trachoma.jpg)]

---

But this does not work:

.center[![:scale 50%](picsfigs/trachoma.jpg)]

Nor this

.center[![trachoma][:scale 50%](picsfigs/trachoma.jpg)]

one more slide

---

macros.js file:

remark.macros.scale = function (percentage) {
  var url = this;
  return '<img src="' + url + '" style="width: ' + percentage + '" />';
};

Answer 1

You need to put beforeInit: "macros.js" under nature as below.

---
title: "A Cool Presentation"
output:
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts]
    seal: true
    self_contained: true
    yolo: false
    nature:
      autoplay: 30000
      beforeInit: "macros.js"
---