Margin Lightbox images in margin won't open.

[OrenBochman]

Bug description

In some of my documents, there are many images in the margin. If they flow past the comment widget, they are no longer clickable.

Bug sample is now available in: https://github.com/OrenBochman/quatro-cli-bugs/tree/main/bugs/bug1

Expected behavior

I expect all the images in the margin to open when clicked.

Also, I would like to know if there is a way to synch the body text and the margin content. I tried to use markdown hr and heading but without success so far.

Actual behavior

The images don't show an icon change on hover and the lightbox won't open.

Your environment

Pop!_OS 22.04 LTS RStudio 2023.12.1+402 "Ocean Storm" Release (4da58325ffcff29d157d9264087d4b1ab27f7204, 2024-01-29) for Ubuntu Jammy Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) rstudio/2023.12.1+402 Chrome/116.0.5845.190 Electron/26.2.4 Safari/537.36

R

version _
platform x86_64-pc-linux-gnu
arch x86_64
os linux-gnu
system x86_64, linux-gnu
status
major 4
minor 1.2
year 2021
month 11
day 01
svn rev 81115
language R
version.string R version 4.1.2 (2021-11-01) nickname Bird Hippie
Warning message: No Python documentation found for 'lime_tabular.LimeTabularExplainer'.

Python 3.10.12

Quarto check output

Quarto 1.4.549 [✓] Checking versions of quarto binary dependencies... Pandoc version 3.1.11: OK Dart Sass version 1.69.5: OK Deno version 1.37.2: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.4.549 Path: /opt/quarto/bin

[✓] Checking tools....................OK TinyTeX: v2023.11 Chromium: (not installed)

[✓] Checking LaTeX....................OK Using: TinyTex Path: /home/oren/.TinyTeX/bin/x86_64-linux Version: 2023

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

[✓] Checking Python 3 installation....OK Version: 3.10.12 Path: /home/oren/work/blog/env/bin/python3 Jupyter: 5.7.1 Kernels: python3

[✓] Checking Jupyter engine render....OK

R scripting front-end version 4.1.2 (2021-11-01) [✓] Checking R installation...........(None)

  Unable to locate an installed version of R.
  Install R from https://cloud.r-project.org/

[cscheid]

Can you share an example?

[mcanouil]

Please fill completely and as requested the template. We can't use your report as is.

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````). See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

````qmd
---
title: "Reproducible Quarto Document"
format: html
engine: knitr
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)

The end.

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[OrenBochman]

Can you share an example?

This is a tricky issue to reproduce, as the problem was eventually resolved as I added more things to the page. However, as I tried to reproduce, I recalled that there may have been some markdown issues on the page, which triggered this issue as the last clickable image seemed to change as I added white space between the pictures.

My example is a page currently around 225 MB (compressed).

So, I'm adding just the quarto files and not the images. sample.zip

[mcanouil]

Please share as requested a Git repository or plain text. And a small one.

Note that you should check on other browsers and machines, that the issue is not specific the where you open your massive file/project.

[OrenBochman]

1. I pasted a shorter plaintext quarto page in the bug report. - you may be able to view it live at this link
2. I also tested on firefox - with the same result.
3. the --- hr is a red herring as the bug appears without it.
4. workaround: adding a new line at the end of line 65 fixes the issue.
5. when the images are external the external link decorator only appears after the first two images, should we be getting this decorator for images that are not links? p.s. this also reproduces the other issue - if you open the light box and scroll left or right. -- I'll be updating that soon.

[mcanouil]

Are all the options you set required to reproduce your issue? Remove everything not necessary, please and ensure it is reproducible by running the document you shared on your computer, as we need to be able to render it.

[OrenBochman]

Are all the options you set required to reproduce your issue?

:thinking: probably not.

I don't know how to proceed without breaking my blog more than I have. Also, updating the blog is taking longer since I need to run long quarto publish steps to work around #8740.

The settings in the example come from the blog - consolidated from multiple files - they are not all necessary but sufficient for reproduction. My old man tells me, "Perfect is the enemy of good." If we look on the bright side:

1. I opened my first bug in this project.
2. I reduced the example by 90% and the file size by 99.99%.
3. I completed all the fields of the template.
4. I provided with a workaround.
5. I already ran it on my computer and published it to: https://orenbochman.github.io/blog/qa_demo1.html
6. If you are okay with me updating the example, I'll do so as soon as I have a better one.

That's six good things. :tada: If you have any tips :bulb: for quickly testing many different settings, let me know.

[mcanouil]

You don't have to break anything. You can try to replicate in a smaller project that you host on GitHub, which you can share. You can also make a new branch, remove all unnecessary components until you get something small that exhibits the issue, doing so you might figure out by yourself any possible mis-configuration for instance.

Look at some other reproducible examples for various issues/discussions: https://github.com/mcanouil/quarto-issues-experiments

Time is limited, we unfortunately don't have the time to dive in into big projects and basically remove ourselves the unnecessary components, ensuring we have all the dependencies needed, etc., especially since we are not even sure we'll be able to reproduce your issue at all.

[OrenBochman]

That's a very interesting repo.

I'll see if I can use it to speed things along. The readme is kind of sparse on details on how to get it to run. (or does it also have some CI/CD via github action)?

[mcanouil]

The repo is not a template, it's simply a list of reproducible examples for the corresponding issues. Thus, there is nothing in it you can use, simply take inspiration from to make and share a small, complete, and self-contained reproducible example. You'll see that the examples are quite small even for projects, e.g.:

• quarto-cli-8544 is for https://github.com/quarto-dev/quarto-cli/issues/8544

Most of the time, you only need a pastable example as shown in https://github.com/quarto-dev/quarto-cli/issues/8738#issuecomment-1944478621

[OrenBochman]

@mcanouil - I updated the sample per your suggestion.

[mcanouil]

Your syntax is incorrect as you are making the figures part of the same paragraph. You need to add an empty line.

---
title: "issue #8738"
subtitle: "Margin Lightbox images in margin won't open"
lightbox: true
---

## Title

![1](https://placehold.co/600x400?font=roboto&text=A+Click+Target+1){.column-margin group="my-gallery"}

![2](https://placehold.co/600x400?font=roboto&text=Not+A+Click+Target+3){.column-margin group="my-gallery"}

![3](https://placehold.co/600x400?text=text=Not+A+Click+Target+4){.column-margin group="my-gallery"}

And if you want to add multiple figures in margin, I suggest you avoid duplication and use fenced divs.

---
title: "issue #8738"
subtitle: "Margin Lightbox images in margin won't open"
lightbox: true
---

## Title

::: {.column-margin}

![1](https://placehold.co/600x400?font=roboto&text=A+Click+Target+1){group="my-gallery"}

![2](https://placehold.co/600x400?font=roboto&text=Not+A+Click+Target+3){group="my-gallery"}

![3](https://placehold.co/600x400?text=text=Not+A+Click+Target+4){group="my-gallery"}

:::

[OrenBochman]

Thanks for taking time to consider this issue. Please forgive this rather long note:

I realize that adding two newlines is a fix - I pointed this out when I completed the template and mentioned it again above. The problem isn't to get the figure into the margin which works fine - it is that the lightbox feature breaks down from this point on for all subsequent images in the margin.

Ensuring certain there are no images with just one line can be tricky in long documents - That is not what one would expect from markdown and certainly not once it becomes HTML. It seems like an issue with the parser. Particularly as the problem of disfuctional light boxes tragets persists in all properly spaced images when placed much further down.

:imp: was expecting to get same robust behavior when putting images on the same line and possibly without any white space. Someplace in the docs there is an image in a linked image [{#whatever}](link to the source per cc by sa) no white space and the parser is ok with that. and I have also have made liberal use of {#whatever .colum-margin}]. to comply with cc by sa and better yet {#fig-whatever .colum-margin}]. which work more or less fine - except in Rstudio which won't preview images with citation in non-visual mode but work fine in visual mode. The point of these examples is that a the requirement of a new paragraph to get the lightbox to work seems unexpected, undocumented, inconsistent with the above --- some might call "a cruel and unusal requirement" to get the lightbox feature to work :crying_cat_face:

Regarding the fenced solution it saves some typing but *my use case capturing many images for notes or reviews based on sequences of screen-caps/presentation slides/videos/pages-from-papers which may get captions, renamed and intevweaving text later on.

[mcanouil]

There are few wrong statements. No empty lines between figures means inline images (image within a paragraph). I am not expecting inline images to follow rules defined for actual figures (look at the code produced, you'll empty line is not a "fix", it's markdown syntax). For instance, fig-align="center" also does not work because it's for figures, not inline images. The issue about "all subsequent images" being broken is false, see example below. Only the inline images are impacted. In addition, the behaviour is strictly the same without the margin.

---
title: "issue #8738"
subtitle: "Margin Lightbox images in margin won't open"
lightbox: true
---

## Title

![1](https://placehold.co/600x400?font=roboto&text=A+Click+Target+1){group="my-gallery"}

![2](https://placehold.co/600x400?font=roboto&text=Not+A+Click+Target+3){group="my-gallery"}
![3](https://placehold.co/600x400?text=text=Not+A+Click+Target+4){group="my-gallery"}

![5](https://placehold.co/600x400?font=roboto&text=A+Click+Target+5){group="my-gallery"}

Edit: in case you are suggesting that inline images should behave as figures, this would mean that any icons used inline would have the same treatment and that's something that users will very likely never ever want.

[cderv]

I don't get all the why and details of your discussions above but here is how it works for Lightbox

When enabling by default with lightbox: true, this is the behavior (from our doc https://quarto.org/docs/output-formats/html-lightbox-figures.html#enabling-lightbox)

• When lightbox is set to automatically select images, it will match any image used as a figure or which appears as a block (by itself within a paragraph).

• By default, images that appear inline with other content will not receive lightbox treatment.

This means that if you want Lightbox treatment on inline images too, you need to opt-in by adding the class .lightbox (mentioned right below the previous in our doc https://quarto.org/docs/output-formats/html-lightbox-figures.html#applying-lightbox-to-specific-images)

So if you use this

---
title: "Lightbox"
lightbox: true
---

![good](https://placehold.co/600x400?font=roboto&text=A+Click+Target+1){.column-margin group="my-gallery"}

![better](https://placehold.co/600x400?font=roboto&text=A+Click+Target+2){.column-margin group="my-gallery"}

![bug](https://placehold.co/600x400?font=roboto&text=Not+A+Click+Target+3){.column-margin .lightbox  group="my-gallery"}
![bug](https://placehold.co/600x400?text=text=Not+A+Click+Target+4){.column-margin .lightbox group="my-gallery"}

It will work, even in margin.

Hope it helps

[github-actions[bot]]

Thank you for using Quarto and reporting an issue!

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate. If you are still facing the issue, please review the "Bug Reports" guide on how to provide a fully reproducible example as a self-contained Quarto document or a link to a Git repository. Without a reproducible example, it is unlikely that the issue will be addressed.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)

The end.