How to turn the lightbox on for images embedded using HTML tags in Quarto website?

[arnaudgallou]

Description

For some reasons, lightbox: true only seems to add the required scripts (located in site_libs/quarto-contrib/glightbox/) when Quarto detects the markdown image syntax ![](). I would prefer to use <img> for better control and to keep the EJS file cleaner (I find mixing markdown syntax and EJS messy and hard to read).

Is this possible?

[mcanouil]

See the documentation: https://quarto.org/docs/output-formats/html-lightbox-figures.html#applying-lightbox-to-specific-images

[mcanouil]

You are looking at the plugin and not the Quarto implementation.

The Quarto implementation uses a Lua filter to insert the dependency and look for "lightbox" sets on images to do so regardless of what you can see in the upstream repository.

---
format: html
lightbox: auto
---

![Quarto logo](https://quarto.org/quarto.png){.lightbox width="200"}

[![Quarto logo](https://quarto.org/quarto.png){width="200"}](https://quarto.org){.lightbox}

```{=html}
<img src="https://quarto.org/quarto.png" class="lightbox" alt="Quarto logo" width="200" />
```

Here it works because lightbox is set to auto or true in the YAML and there are images that are actually processed, thus the dependency is added.

Example of EJS with lightbox: https://github.com/mcanouil/quarto-issues-experiments/blob/main/test-gallery/gallery.ejs

---

Regarding your main issue, be aware that Quarto reads EJS as markdown, a more accurate extension should be .ejs.md, thus when using HTML in it, you should use raw blocks, this has performance issue as all content will be read as markdown and Quarto/Pandoc will spend some time trying reading markdown where it's HTML.

[arnaudgallou]

That doesn't fix the problem. Again, my problem isn't related to the HTML tags but the missing scripts in the header. In my example, glightbox uses the href as the source for the HTML (and image) generated for the lightbox.

Your example only works because you use the markdown image syntax in your document. Remove those and it will no longer work.

[mcanouil]

Let me rephrase my previous reply (an example showing why and when it works) another way: there is no way to force the inclusion of glightbox script without having enabled the plugin AND having images processed.

[arnaudgallou]

AND having images processed.

I assume that by "image processed" you mean the rendering of markdown images (![]()).

IMO, it would make sense to have glightbox added to the page as long as lightbox is true. That would allow people use lightboxes for images embedded via <img> without having to use ![]() as well.

[mcanouil]

Lightbox was originally an external extension with a Lua filter.
The Lua filter works on the AST Image node. If the Lua processes no image node, then the dependency is not added.
Bare HTML or HTML in raw blocks are visible as such, thus no Image node.

It's possible to change the behaviour to include the dependency when explicitly setting true. That's to the maintainers to decide.