Imagemover Extension For Quarto Revealjs

Caution

This extension has been superseded by the quarto-revealjs-editable extension.

This Revealjs plugin allows the repositioning and resizing of images directly in the previewed slides.

Installing

quarto add emilhvitfeldt/quarto-revealjs-imagemover

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

Designate the extension as a revealjs-plugins in the yaml file.

revealjs-plugins:
 - imagemover

Next, at the following anywhere in the document. Set the filename to match the name of the document it is in.

::: {#filename filename=example.qmd}
:::

To designate that you want to move and resize an image, add the imagemover id to the image like so.

![](image.png){#imagemover}

Note that this extension will completely rewrite the {}.

Once you have rerendered the slides, each image with the id should be movable and resizable using the corners. Holding shift while pulling the corners respects aspect ratios.

Once you are happy with the sizes, open the menu (M), go to tools, and click "Save Moved Images". This will prompt you to save a file. Choose the same folder you are working in to overwrite the document you are in. Rerender, and the images should be locked in place.

Demo Video

Example

Here is the source code for a minimal example: example.qmd.