`listing:image-lazy-loading` does not work for values of `true` or `false`

[prncevince]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

When creating a Document Website Listing & setting listing:image-lazy-loading to true, <img> elements within the listing do not get tagged with the loading="lazy" property.

Steps to reproduce

Create a listing. See the Quarto Guide on Document Listings.

Actual behavior

No loading attribute is added to images in the listing.

Instead we see:

<p class="card-img-top">
  <img src="assets/img/xyz.jpg" style="height: 150px;" class="thumbnail-image card-img">
</p>

Expected behavior

For the listing YAML configuration below:

---
listing:
  type: grid
  image-lazy-loading: true
---

We should expect html <img> elements on a page containing a listing to have the loading="lazy" property.

e.g.

<p class="card-img-top">
  <img loading="lazy" src="assets/img/xyz.jpg" style="height: 150px;" class="thumbnail-image card-img">
</p>

Your environment

• OS: MacOS Sonoma 14.6.1

Quarto check output

I ran this on the latest tagged version of quarto (v1.9.17), as well as the tag from when the feature was added to the Changelog (v1.5.31):

• quarto v1.5.31 Changelog

Quarto v1.5.31:

Quarto 1.5.31
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.13: 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.31
      Path: {truncated}/.quarto-cli/quarto-1.5.31-macos/bin

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

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: {truncated}/Library/TinyTeX/bin/universal-darwin
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.11.5 (Conda)
      Path: /opt/homebrew/Caskroom/miniforge/base/envs/pygis/bin/python
      Jupyter: 5.3.1
      Kernels: python3, javascript, ir

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

[✓] Checking R installation...........OK
      Version: 4.3.1
      Path: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources
      LibPaths:
        - {truncated}/renv/library/R-4.3/aarch64-apple-darwin20
        - {truncated}/Library/Caches/org.R-project.R/R/renv/sandbox/R-4.3/aarch64-apple-darwin20/ac5c2659
      knitr: 1.43
      rmarkdown: 2.24

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

Quarto v1.9.17:

Quarto 1.9.17
[✓] Checking environment information...
      Quarto cache location: {truncated}/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.4.5: OK
      Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.9.17
      Path: {truncated}/.quarto-cli/quarto-1.9.17-macos/bin

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

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: {truncated}//Library/TinyTeX/bin/universal-darwin
      Version: 2023

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
      Source: MacOS known location

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

[✓] Checking R installation...........OK
      Version: 4.3.1
      Path: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources
      LibPaths:
        - {truncated}/renv/library/R-4.3/aarch64-apple-darwin20
        - {truncated}/Library/Caches/org.R-project.R/R/renv/sandbox/R-4.3/aarch64-apple-darwin20/ac5c2659
      knitr: 1.43
      rmarkdown: 2.24

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

[✓] Checking Python 3 installation....OK
      Version: 3.11.5 (Conda)
      Path: /opt/homebrew/Caskroom/miniforge/base/envs/pygis/bin/python
      Jupyter: 5.3.1
      Kernels: python3, javascript, ir

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

[✓] Checking Julia installation...

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

I cannot reproduce your claim.
Setting image-lazy-loading: false properly removes the attribute.

---

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.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

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

[prncevince]

Thank you for your feedback.

I think that the issue is a bit more complicated than what I described.

It's for images not passed explicitly by yaml. So for images used in the listing as the first image of the document, the loading="lazy" attribute is not set.

i.e. listing:image-lazy-loading:true only sets <img loading="lazy"> for listing posts/documents with image: explicitly set.

The repro that you're using should show this in the 2nd article/image in the listing.

I created a similar repro to what you've shown & show this. See the 2nd highlight <img> element below.

Repro repository: https://github.com/prncevince/test-quarto-listing
Repro quarto website from screenshot: https://prncevince.github.io/test-quarto-listing

Repro was templated with the following command (Quarto v1.5.31):

quarto create project blog .

Then, edited index.qmd YAML header to create a listing grid:

---
title: "Demo"
listing:
  type: grid
  image-lazy-loading: true
  contents: posts
  sort: "date desc"
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---

Lastly, I make copies of both default posts to show that lazy-loading is indeed set only in documents with loading="lazy" explicitly set.

Repro relevant file system:

[drwxr-xr-x 149K Jan 25 18:21]  .
├── [drwxr-xr-x 161K Jan 25 18:52]  posts
│   ├── [drwxr-xr-x  41K Jan 25 19:06]  post-with-code
│   │   ├── [-rw-r--r--  41K Jan 25 18:14]  image.jpg
│   │   └── [-rw-r--r--  167 Jan 25 18:14]  index.qmd
│   ├── [drwxr-xr-x  41K Jan 25 19:06]  post-with-code-1
│   │   ├── [-rw-r--r--  41K Jan 25 18:14]  image.jpg
│   │   └── [-rw-r--r--  167 Jan 25 18:14]  index.qmd
│   ├── [drwxr-xr-x  39K Jan 25 19:06]  welcome
│   │   ├── [-rw-r--r--  297 Jan 25 18:14]  index.qmd
│   │   └── [-rw-r--r--  39K Jan 25 18:14]  thumbnail.jpg
│   ├── [drwxr-xr-x  39K Jan 25 19:06]  welcome-1
│   │   ├── [-rw-r--r--  297 Jan 25 18:14]  index.qmd
│   │   └── [-rw-r--r--  39K Jan 25 18:14]  thumbnail.jpg
│   └── [-rw-r--r--  237 Jan 25 18:14]  _metadata.yml
├── [drwxr-xr-x  527 Jan 25 18:06]  utils
│   └── [-rwxr-xr-x  431 Sep  5  2023]  download-quarto.sh
├── [-rw-r--r--    7 Jan 25 18:12]  .quarto-version
├── [-rw-r--r--  257 Jan 25 18:14]  _quarto.yml
├── [-rw-r--r--  310 Jan 25 18:14]  about.qmd
├── [-rw-r--r--  185 Jan 25 18:14]  index.qmd
├── [-rw-r--r--  59K Jan 25 18:14]  profile.jpg
└── [-rw-r--r--   17 Jan 25 18:14]  styles.css

Built & tested with both v1.5.31 & v1.9.17

[mcanouil]

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

---

Thanks for the additional details.
There is no point to test using 1.5.
Current stable is 1.8.

[mcanouil]

This seems to be an oversight which requires quite some changes to ensure the option is respected by the codepath responsible from generating the img HTML tag for auto-detected preview/feature image.

In the meantime, I would suggest to be explicit in your YAML.