Quarto lightbox questions

[AlbertoFabbri93]

Description

Hi, I have a couple of questions about the lightbox option in Quarto. Here is the repro:

---
title: "Repro"
knitr:
  opts_chunk:
    dev: svglite
format:
  html:
    fig-format: svg
    lightbox:
      match: auto
      loop: false
---

## Packages

```{r}
#| label: setup

library("ggplot2")
```

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

```{r}
#| label: quarto-test
#| layout-ncol: 2

# Create a basic scatter plot
ggplot(mtcars, aes(x = mpg, y = hp)) +
  geom_point() +
  labs(
    title = "Horsepower vs. Miles per Gallon",
    x = "Miles per Gallon (mpg)",
    y = "Horsepower (hp)"
  ) +
  theme_minimal()

# Create a bar plot showing how many cars have each number of cylinders
ggplot(mtcars, aes(x = factor(cyl))) +
  geom_bar() +
  labs(x = "Number of Cylinders", y = "Count of Cars") +
  theme_minimal()
```

Is it possible to force the svg images to fill in the screen when opened with lightbox?

Is there a way to make lightbox work with images generated programmatically outside of a loop but in the same code chunk? I mean so that you can switch between images by using the arrows on the side.

[cderv]

I mean so that you can switch between images by using the arrows on the side.

For this you should be able to group - did you read https://quarto.org/docs/output-formats/html-lightbox-figures.html#advanced-customization-in-computations ?

Is it possible to force the svg images to fill in the screen when opened with lightbox?

I don't know if the underlying library allows this: We use https://biati-digital.github.io/glightbox

You could look into there options or help only, and maybe we are missing a configuration.

Did you already found something ?

You could also trying playing with CSS maybe, to change the size. Use your browser inspector

[AlbertoFabbri93]

Thank you very much for your answer!

I played around a bit with CSS to make the svg images appear fullscreen and I was able to achieve it with the following code:

styles.css:

.gslide-media img[src$=".svg"] {
  width: auto !important;
  height: 100vh !important;
}

repro.qmd:

---
title: "Repro"
knitr:
  opts_chunk:
    dev: svglite
format:
  html:
    css: styles.css
    embed-resources: false
    fig-format: svg
---

## Packages

```{r}
#| label: setup

library("ggplot2")
```

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

```{r}
#| label: quarto-test
#| layout-ncol: 2
#| lightbox:
#|  group: cars

# Create a basic scatter plot
ggplot(mtcars, aes(x = mpg, y = hp)) +
  geom_point() +
  labs(
    title = "Horsepower vs. Miles per Gallon",
    x = "Miles per Gallon (mpg)",
    y = "Horsepower (hp)"
  ) +
  theme_minimal()

# Create a bar plot showing how many cars have each number of cylinders
ggplot(mtcars, aes(x = factor(cyl))) +
  geom_bar() +
  labs(x = "Number of Cylinders", y = "Count of Cars") +
  theme_minimal()
```

The problem is that when I set embed-resources to true, the CSS is no longer included. I checked the documentation and it seems to me that it should work even when using embed-resources, or am I wrong?

quarto --version
1.7.32

[cderv]

The problem is that when I set embed-resources to true, the CSS is no longer included. I checked the documentation and it seems to me that it should work even when using embed-resources, or am I wrong?

Yes CSS should be included inline.

Check your HTML file to see if the rules are there, check the developer to see if the !important is somehow not applying.

And if you found something odd, please open a separate thread with the example. Thank you !

[AlbertoFabbri93]

The issue was due to the SVG image being embedded differently when embed-resources is enabled. The following CSS works correctly with embed-resources: true:

.gslide-media img[src^="data:image/svg+xml"] {
  width: auto !important;
  height: 100vh !important;
}

[AlbertoFabbri93]

For this you should be able to group - did you read https://quarto.org/docs/output-formats/html-lightbox-figures.html#advanced-customization-in-computations ?

I had previously read that section, and I tried applying it in a quite complex (for me :D) document I use for work, but it didn’t work as expected. I've since learned my lesson: now, whenever I try something new, I start with a very simple document. Everything is working fine now.

Even though I had read that section before, I hadn’t realized that you could use the same group name across multiple R chunks. Now that I understand that, the logic behind it makes sense and I see how powerful and useful it really is. I had assumed that galleries were limited to the figures produced a single chunk of code.

Thank you very much for Quarto! It’s incredibly powerful and has been a huge help in improving how I visualize and organize the results of my analyses.

[mcanouil]

To be clear, the lightbox gallery also works for images not generated by code.