Lightbox issues on book project: cover image and html options

[ercbk]

Bug description

HTML Options:
I've tried to activate lightbox for every image in the book using the HTML options in the _quarto.yml, but I think it only works on the cover image of index.qmd.

Cover Image:
With the lightbox settings used in the _quarto.yml, the cover image of the book is shifted upwards. I've tried messing with image's max-width in CSS, but it had no real effect on the shift. I can remove lightbox settings, and the image is aligned properly. Although, if I am (eventually) able to use the lightbox setting in the _quarto.yml, then this would be a problem.

Steps to reproduce

Here are settings I'm using in my _quarto.yml. My project is in this repo.

format:
  html:
    toc-depth: 5
    theme:
      - styles.scss
    css: styles.css
    code-link: true
    backgroundcolor: "#fffaf0"
    fontcolor: "#404d59"
    mainfont: 'Noto Serif'
    monofont: 'FiraCode-Retina'
    linkcolor: '#0064B6FF'
    highlight-style: printing
    lightbox:
      match: auto
      effect: zoom
      loop: false

Expected behavior

I'd like to be able to apply lightbox to the entire book instead of having to apply to the lightbox class to each image. Also, If I'm able to activate lightbox globally, I don't want my cover image to be misaligned.

Actual behavior

No response

Your environment

• quarto 1.4.549
• Windows 10
• RStudio 2024.09.1 Build 394

Quarto check output

$ quarto check
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: C:\Users\tbats\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\tbats\AppData\Roaming\TinyTeX\bin\win32\
      Version: 2018

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

[>] Checking Python 3 installation....OK
      Version: 3.10.11
      Path: C:/Users/tbats/AppData/Local/Programs/Python/Python310/python.exe
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with py -m pip install jupyter

[>] Checking R installation...........OK
      Version: 4.3.2
      Path: C:/PROGRA~1/R/R-43~1.2
      LibPaths:
        - C:/Users/tbats/AppData/Local/R/win-library/4.3
        - C:/Program Files/R/R-4.3.2/library
      knitr: 1.48
      rmarkdown: 2.27

[>] Checking Knitr engine render......OK

[mcanouil]

Thanks for the report!

Could you upgrade your version of Quarto as you are using an old version?
Current stable is 1.5, 1.6 is currently in release candidate thus soon to be the new stable version.

[ercbk]

Updated. No change

$ quarto check
Quarto 1.5.57
[>] 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.57
      Path: C:\Users\tbats\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\tbats\AppData\Roaming\TinyTeX\bin\win32\
      Version: 2018

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

[>] Checking Python 3 installation....OK
      Version: 3.10.11
      Path: C:/Users/tbats/AppData/Local/Programs/Python/Python310/python.exe
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with py -m pip install jupyter

[>] Checking R installation...........OK
      Version: 4.3.2
      Path: C:/PROGRA~1/R/R-43~1.2
      LibPaths:
        - C:/Users/tbats/AppData/Local/R/win-library/4.3
        - C:/Program Files/R/R-4.3.2/library
      knitr: 1.48
      rmarkdown: 2.27

[>] Checking Knitr engine render......OK

[mcanouil]

Unfortunately, your repository is too big for someone to dive in.
Could you try to reproduce on a small case? Maybe using quarto create project book?

[mcanouil]

I cannot reproduce any issues using 1.6 RC.

1. Create a book: quarto create project book.
2. Add ![An image]({{< placeholder 600 400 >}}){#fig-placeholder} to every Quarto documents.
3. Add lightbox: true in _quarto.yml.
4. quarto render

Screen.Recording.2024-11-24.at.18.40.04.mov

[ercbk]

You fixed the first issue. In my _quarto.yml, I specified my lightbox settings under format >> html, and you gave yours its own section. I moved my settings to the same place as yours, and that fixed the global settings issue.

You didn't address the second issue, which is the cover image being shifted upwards. You put an image in your index.qmd but that's not the cover image.

book:
  title: "Data Science"
  author: "Eric Book"
  date: "5/18/2023"
  cover-image: images/data-science-notebook-4a.jpg

That issue is still occurring for me.

[ercbk]

You dealt with the other issue using your barebones project, and I think you could do the same here since we're just talking about a cover image. But, if a smaller repo would help, this one is only 100MB. (repo)

[mcanouil]

You didn't address the second issue, which is the cover image being shifted upwards. You put an image in your index.qmd but that's not the cover image.

To be clear, I was not trying to solve anything. Only to understand with a small workable example.
You know what is or not a issue and in which setup you see it, I don't.

A 300+ documents repository is not small, so a "100Mb" repository is not.
I showed you a clear and small reproducible example.
Please do the same.
Thank you for helping us help you.

[ercbk]

Reproducible Example

[cderv]

So this is the html for no lightbox

<section id="preface" class="level1 unnumbered">
<h1 class="unnumbered">Preface</h1><p><img src="cover.png" title="mybook" class="quarto-cover-image img-fluid"></p>
<p>This is a Quarto book.</p>

And for lightbox: true, the processing we do seem to change the DOM (or the processing happens before we do change the DOM 🤔 )

<p><a href="cover.png" class="lightbox" data-gallery="quarto-lightbox-gallery-1"><img src="cover.png" title="mybook" class="quarto-cover-image img-fluid"></a></p>
<section id="preface" class="level1 unnumbered">
<h1 class="unnumbered">Preface</h1>
<p>This is a Quarto book.</p>

This is why the image is moved above.

[cderv]

Our post processor does not move the image because it happens after lightbox treatment

The post processing is

quarto-cli/src/project/types/book/book.ts

Lines 284 to 296 in 83a3b5a

	function bookHtmlPostprocessor() {
	return (doc: Document): Promise<HtmlPostProcessResult> => {
	// find the cover image
	const coverImage = doc.querySelector(".quarto-cover-image");
	// if the very next element is a section, move it into the section below the header
	const nextEl = (coverImage?.parentNode as Element)?.nextElementSibling;
	if (nextEl && nextEl.tagName === "SECTION" && coverImage?.parentNode) {
	coverImage?.parentElement?.remove();
	nextEl.firstElementChild?.after(coverImage?.parentNode);
	}
	return Promise.resolve(kHtmlEmptyPostProcessResult);
	};
	}

while the document is at this state

<p><a href="cover.png" class="lightbox" data-gallery="quarto-lightbox-gallery-1"><img src="cover.png" title="mybook" class="quarto-cover-image img-fluid" /></a></p>
<section id="preface" class="level1 unnumbered">
<h1 class="unnumbered">Preface</h1>
<p>This is a Quarto book.</p>

[cderv]

I wonder if the easiest fix here is to make the cover image escape the lightbox treatment. I am not sure it make much sense to have the lightbox effect apply to this specific image 🤔

[ercbk]

Just my two-cents, but it wouldn't bother me if the cover image doesn't have lightbox. I can't imagine zooming into a cover is a thing that happens too often. So the convenience of being able to auto-zoom after clicking (vs opening the image in a new tab) isn't more important than having a properly aligned image.