How can I set different sizes for an image (or more generally a figure) depending on output format?

[pagiraud]

Description

Hi,
I’m quite happy with Quarto for generating my presentations (RevealJS) and handouts (PDF, not from the PDF export bundled with RevealJS). On my presentations, I have lots of figures (mainly maps and photographies) that are too small when shown in the slide, so I use the lightbox class to make them bigger. But, as discussed elsewhere, that is not compatible with the default r-stretch class. Thus, I have to manually set a size for my images to avoid slide overflows (approximatively a height of 500 px). But then, when I export to PDF, my figures are too small.

More generally, different output formats imply different contexts of reading, so different sizes for different output formats might be a good thing.

(How) can I set different sizes for an image depending on the output format?

Thanks in advance for your answer.

[mcanouil]

It depends, in which context you want to change figure size?

A small reproducible example to showcase your issue is always welcome (and appreciated).

[cderv]

A few ideas:

• Use ids on your image (or attributes or class to be more generic), and use Lua filters to target them, and depending on output format you set the width and height attributes on the filter. This would be the Quarto way to modify content programatically
• You could use conditional content to duplicate your image but change size and keep only one based on format
• When using computation to include your graphics, you could set size differently based on output format. But this is usually engine specific (Like I know it could work knitr::include_graphics() function).
• As HTML output can be easily post processed after render, or even dynamically at loading time, you could also do this using JS by iterating over your image and tweaking the size based on the format (revealjs or not). This would mean in the .qmd you only use size for the PDF output.

Those are just ideas - not sure they'll fit your process but I hope it helps and it will give you food for thoughts 😄

[mcanouil]

Additionally, if the images are computed you can set fig- options under the format which will make them specific to the format under which they are.
If the engine is knitr, they are even other possibilities.

[pagiraud]

Thanks to all for your answers.

@mcanouil You’re right, the problem may occur in different contexts, but 99% it’s with an image. Put simply, with an image of the form:

![Image alt text](imgsrc)

How may I configure different sizes for different output formats?

@cderv Thanks for your ideas, there are possibilities I had never thought of!

I think that a filter would be my choice, but exploiting the output format (using FORMAT in my Lua filter) to configure default values, and, at the image level, using key/val attributes in the form outputformatname-height outputformat-width so that my filter could apply the right dimensions.

Example:

![Image alt text](imgsrc){height=500, revealjs-height=600, pdf-height=900}

Do you think that may be a good idea? I think I might write the filter next week.

[mcanouil]

The filter approach might be the best approach as it would apply on all images, computed or "hardcoded".
Although for computed images, you might want to account for "data-revealjs-height":

#| revealjs-height: 600