book .qmd not displaying image previews for collection of .jpg images

[vogtr19]

Description

Windows 11
RStudio v. 2025.05.0 build 496
Quarto v. 1.7.32

I'm trying to display a listing of many .jpg files in a .qmd 'chapter' of a book project but it fails to show the image previews. I've spent all day trying to search for examples such as https://github.com/mvuorre/quarto-gallery/ with no resolution.

I created a reprex using a new Quarto Project (it creates a minimal book project). All I modified was the into.qmd file with following and added a galleries folder at root with 4.jpg files:

---
title: "Test Gallery"
listing:
  contents: "galleries/*.jpg"
  type: grid
  fields: [image, filename, title]
  sort: "date desc"
  categories: false
  sort-ui: true
  filter-ui: true
---
This is a new Quarto project (book) created from markdown as a reprex.

''''
I always get this regardless of using just 400 pixel image size, playing with image-height options, etc.
![image](https://github.com/user-attachments/assets/67c93868-3fe5-4149-a6af-244288167bc4)

One other side issue I'd like to solve is that even when my image contains a Title in the metadata verified with Windows Explorer, this never translates to the title field.  Is there anyway to pull this in?

Thanks so much for any help here.

[mcanouil]

Unfortunately, that's not reproducible as it lacks many pieces.

See the following thread:

• Adding photo gallery to Quarto #5972

Also, it seems your post is not well formatted.
Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

Finally, if you include screenshot, be sure to add alternative text to ensure the image is accessible to all users.

---

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.

[vogtr19]

My apologies, @mcanouil. I'll try to reformat my issue and clarify here.

I'm trying for a very simple listing of .jpg images, I don't need a gallery where each image is shown as full screen. I'd simply like the .jpg image to shown in a 3 col standard format as previews where the user can click the image to see the full-screen image. I also don't necessarily need the sort or filter-ui's to show. As far as what you think I'm missing, could you please elaborate upon my clarification?

Again, my reprex involved a newly created canned new Quarto Project with the following file structure (showing only modified files / folders):

my_project/
|--- galleries/ (contains four dummy .jpg files)
|--- intro.qmd

intro.qmd:

---
title: "Test"
listing:
  contents: "galleries/*.jpg"
  type: grid
  fields: [image, filename, title]
  sort: "date desc"
  categories: false
  sort-ui: false
  filter-ui: false
---

This is a new Quarto project (book) created from markdown as a reprex.

Setup:
Windows 11
RStudio v. 2025.05.0 build 496

quarto check
Quarto 1.7.32
[>] Checking environment information...
      Quarto cache location: C:\Users\other\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.13.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.7.32
      Path: C:\Users\other\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2024.07.03
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\other\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

[>] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: C:\Program Files\Google\Chrome\Application\chrome.exe
      Source: Windows Registry

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

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.4.1
      Path: C:/PROGRA~1/R/R-44~1.1
      LibPaths:
        - C:/Users/other/AppData/Local/R/win-library/4.4
        - C:/Program Files/R/R-4.4.1/library
      knitr: 1.47
      rmarkdown: 2.27

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

Rendered output shown below in attached file. If I select the grey box representing the .jpg file it shows properly. The only issue is that I don't see a preview of the image in the html rendered page.

{fig-alt="Four gray boxes show placeholders for the .jpg files. If I click one it shows the image."}

[mcanouil]

The thing is that you have a "working" example that you can share as a Git repository, but here you ask others to create everything from scratch to help you.
Unfortunately, asking that much time to be spend in order to help you limits the actual help you can get.
Help us help you by providing the means to do so.

[vogtr19]

Further apologies. reprex contained at: https://github.com/vogtr19/listing-reprex

[mcanouil]

The issue is that you are giving a list of images which you expect to be used for different fields of your listing.
In your case, you did not set title or image.

Either do as demonstrated (custom EJS listing) in the links shared previously or provide a full specification of your listing.

  contents:
    - filename: galleries/img_1.jpg
      title: "Image 1"
      image: galleries/img_1.jpg
    - filename: galleries/img_2.jpg
      title: "Image 2"
      image: galleries/img_2.jpg
    - filename: galleries/img_3.jpg
      title: "Image 3"
      image: galleries/img_3.jpg
    - filename: galleries/img_4.jpg
      title: "Image 4"
      image: galleries/img_4.jpg

[vogtr19]

Thanks so much @mcanouil ! It looks like I'll need to pursue the custom EJS route to automate 200+ images starting with the links provided (and I'll need to hone my js skills) but at least I understand what was breaking in my original assumption with the passing the galleries folder reference. I will also be sure to up my game regarding next time if I ever submit an item again to prevent any wasted calories. Thanks for your patience with someone new in the last year trying to climb this Quarto and peripheral foodchain to create great content.

[mcanouil]

You nearly have nothing to do here, see #5972 (comment)

[vogtr19]

Agreed, the code you posted for the simple gallery is very close. I'll just need to adapt a bit. Thanks again!

[vogtr19]

It displays the images amazingly well! Now, I'm just trying to automate adding a caption for each photo from the title field of each of the .jpg file's metadata. I saw how rfsaldanha in pulled exif data using r code, but I can't find a way to adapt that into an ejs template to complement mcanouil's great gallery example. If anyone has any ideas here it would be very much appreciated.