Lightbox Quarto feature could work for raw HTML image too

[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.

[cderv]

Maybe everything as been said, but I want to add a bit more thoughts.

@arnaudgallou if you want to control lightbox directly through https://github.com/biati-digital/glightbox without using the Quarto feature, then you can add yourself the required dependencies using HTML includes

lightbox feature we added (https://quarto.org/docs/output-formats/html-lightbox-figures.html) will do that for you, but you need to adapt to how we built in the wrapper and support. Under the hood this will be GLightbox - but not directly following the Glightbox syntax as we do some processing. And this processing does not include raw HTML block as explained. So class='lightbox' won't be caught by quarto

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

We could look into that, but I am not sure to see the value comparing to you adding the dependencies you need in your document and project in this case.

Another option is for use to somehow process HTML Raw block and look for images with class lightbox. 🤔

Anyhow this won't change the processing we do on https://github.com/quarto-dev/quarto-cli/blob/762b65650ace20de02948dde3e449c10fd8ab1ac/src/resources/filters/layout/lightbox.lua

• Images within link are not processed, because Quarto will add the Link wrapper and move attributes.
• .lightbox is used, and not .glightbox

This makes considering raw HTML block handling tricky. And why we don't support it. Currently

• Use lightbox configuration and write markdown
• Don't use lightbox and insert the dependencies you need if you want advanced mode and use raw HTML in .qmd source

Thanks for the discussion and your suggestion ! I am moving this to feature request.

[arnaudgallou]

Thanks for the additional information.

I initially tried to include the scripts provided by Quarto (in site_libs/quarto-contrib) in the header and use class="lightbox", hoping it will just work. I now understand why it doesn't.

If it's a cheap implementation, that would be very convenient to have support for raw HTML blocks since the GLightbox dependencies are already shipped with Quarto.

[cderv]

I don't think it is cheap in the sense that Raw HTML block can be any HTML. Right now, the best way to overcome this limitation is add yourself the depependencies you need using HTML includes: https://quarto.org/docs/output-formats/html-basics.html#includes

and if you need to reuse in your project, bundle that in a Quarto extension to use Lua API to do the inclusion https://quarto.org/docs/extensions/lua-api.html#dependencies