Image placement in Revealjs presentation

[asalber]

Hi!
The Quarto guide says that images in HMTL are centered by default, but it seems that this is not true in Revealjs presentations, because they are placed "in line" with text.

How can I get images centered by default without using {fig-align="left"}

---
title: "Habits"
author: "John Doe"
format: revealjs
---

## Getting up

- Turn off alarm
- Get out of bed

## Going to sleep

- Get in bed
- Count sheep

![](quarto.png)

[cderv]

It shouldn't be. Can you provide a reproducible example by using a url or providing the quarto.png

This is working for me correctly using this below

---
title: "Habits"
author: "John Doe"
format: revealjs
---

## Getting up

- Turn off alarm
- Get out of bed

## Going to sleep

- Get in bed
- Count sheep

![](https://quarto.org/quarto.png)

Which version of Quarto are you using ?

[asalber]

Hi @cderv!
In your example I think the image is not really centered, but expanded to fill the page width.

Try this other one.

---
title: "Habits"
author: "John Doe"
format: revealjs
---

## Getting up

- Turn off alarm
- Get out of bed

## Going to sleep

- Get in bed
- Count sheep

![](https://quarto.org/images/hello-jupyter.png)

In Visual Studio, I ge this:

[mcanouil]

Only captioned figures are centered. Figures without caption are left aligned by default.
See #949 and @jjallaire 's answer.

Maybe "Captioned ..." should be added at the beginning of the following sentence: https://github.com/quarto-dev/quarto-web/blob/0856310989b7715deacf6620315143bb4cc25640/docs/authoring/figures.qmd#L37

Screen.Recording.2022-07-21.at.23.12.07.mov

See the code from the video.

---
title: "Habits"
author: "John Doe"
format: revealjs
---

## Getting up

- Turn off alarm
- Get out of bed

![Something](https://quarto.org/images/hello-jupyter.png)

## Going to sleep

- Get in bed
- Count sheep

![](https://quarto.org/images/hello-jupyter.png){fig-align="center"}

[cderv]

Yes that will definitely contribute! The auto stretch feature also applies here which auto size in the remaining place.
As figure with caption have display: block this will get position differently than with no caption which does not have the display attributes. Unless you set fig-align="center" which will then set the attributes.

So inline image vs figure is the difference. Thanks for spotting that @mcanouil !

[asalber]

Thanks @mcanouil for clarifying this. Now makes sense.
However, in presentations is much more common to present images centered without caption. Would it be possible to add a Revealjs yaml option to set the default image placement?

[mcanouil]

As highlighted by @cderv inline and captioned figures are not the same thing.
An inline figure is to be within an HTML paragraph (in any related HTML format).
Even if I understand the point, I would not force inline figures to be centered and would keep to add the fig-align attribute in such cases otherwise I would use captioned figures (with alt-text).

[cderv]

However, in presentations is much more common to present images centered without caption. Would it be possible to add a Revealjs yaml option to set the default image placement?

@asalber the default behavior in Quarto is to stretch the image to fill the size left. This applies on your example, but as the image is inline with short width bullet point you get the output, I guess it is why it got moved on the right.

If you really want to make center the default for all type of images, you could try this Lua filter

Image = function(e)
  if not e.attributes['fig-align'] then
    e.attributes['fig-align']='center'
  end
  return e
end

this will apply fig-align attributes on all images.

format: 
  revealjs:
    filters: 
      - filter.lua

This is a workaround that can help while the default stays the same