[lightbox] Allow to configure lightbox image size

[meierluk]

Bug description

When using lightbox: true and fig-format: svg, the lightbox image of an R-plot will have the same size as the original one (i.e., there is no zoom-in). When removing fig-format: svg in the code below, everyting works as intended.

Steps to reproduce

---
title: "Untitled"
editor: visual
format: 
  html:
    lightbox: true
    fig-format: svg
---

```{r}
plot(1:10)

### Expected behavior

There should be a zoom-in effect.

### Actual behavior

No zoom-in effect.

### Your environment

- RStudio 2024.04.2+764 
- Quarto 1.5.54 (C:/Users/meierluk/AppData/Local/Programs/Quarto/bin/quarto.exe)

### Quarto check output

Quarto 1.5.54 [>] Checking versions of quarto binary dependencies... Pandoc version 3.2.0: OK Dart Sass version 1.70.0: OK Deno version 1.41.0: OK Typst version 0.11.0: OK [>] Checking versions of quarto dependencies......OK [>] Checking Quarto installation......OK Version: 1.5.54 Path: C:\Users\meierluk\AppData\Local\Programs\Quarto\bin CodePage: 1252

[>] Checking tools....................OK TinyTeX: v2024.04 Chromium: (not installed)

[>] Checking LaTeX....................OK Using: TinyTex Path: C:\Users\meierluk\AppData\Roaming\TinyTeX\bin\windows\ Version: 2024

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK Version: 3.10.0 Path: C:/Users/meierluk/AppData/Local/Programs/Python/Python310/python.exe Jupyter: 5.7.2 Kernels: julia-1.9, python3

(|) Checking Jupyter engine render....Traceback (most recent call last): File "C:\Users\meierluk\AppData\Local\Programs\Quarto\share\jupyter\jupyter.py", line 21, in from notebook import notebook_execute, RestartKernel File "C:\Users\meierluk\AppData\Local\Programs\Quarto\share\jupyter\notebook.py", line 15, in from yaml import safe_load as parse_string ModuleNotFoundError: No module named 'yaml' [>] Checking Jupyter engine render....OK

[cscheid]

I can't reproduce on main:

https://github.com/user-attachments/assets/96ebeb90-bf53-4cb6-9a1c-84f87ab77ba8

[meierluk]

When viewed in a web-browser (Firefox, Chrome) I get with svg:

With the default png the zoomed-in images uses nearly the full space available in the browser (the screenshot is of the same area as above):

[cderv]

The difference you see is about default size for the image. The png image as an intrisic size way bigger than the svg, so it shows bigger when "zoomed" because it is using its full size (while in body it was a reduced display sized).

Probably creating svg with different size, bigger like the png would work.

Though I am seing that GLightbox offers some size option https://github.com/biati-digital/glightbox/blob/master/README.md#examples but we don't allow those configuration to be passed currently. Only a subset are supported and we need to update our doc about it. Currently what is supported is shown in https://github.com/quarto-dev/quarto-cli/blob/8e357529a50424c6ca876ce92e7457e22b5eb3ed/src/resources/filters/layout/lightbox.lua

So until we support setting size specific to lightbox image, creating bigger images seems to be the way to go.

Try for example

• Setting fig-width and fig-height to create bigger image file
• Set out-width to control the display size

---
title: "Untitled"
editor: visual
format: 
  html:
    lightbox: true
    fig-format: svg
---

```{r}
#| fig-width: 12
#| fig-height: 7
#| out-width: 80%
plot(1:10)

![Arc_7a2Las4h9m](https://github.com/user-attachments/assets/d7e8f8a7-d9d6-4c87-bf8c-e8c56011cd6d)

[meierluk]

Ok, thanks for the clarification. Such an option would be great (my use case is an existing quarto book with lot's of images, sometimes with custom size).