quarto-dev / quarto-dev/quarto-cli

`item.image` field not auto populated with alternative sources for custom listing templates

Open
#9,433 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug listings
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

The item.image field is not auto-populated for custom listing templates as documented. Only if the image property in the YAML block/ file/ whatever is explicitly set, a thumbnail image is successfully created when using a custom template.

Why is this important? I find that auto-populating thumbnail images is a super helpful and distinguishing feature of the Quarto publishing system to support code (notebook) driven documentation. Custom templates are often the only way to achieve minor customization but they seem to not have access to preprocessing functions provided by Quarto, i.e. they rightly seem to be pretty far downstream in the food chain. Therefore, cool features like auto-populating thumbnail images for listing items should just work.

The documentation for custom listing templates forwards to the documentation for listing fields which misleads users into believing that item.image is auto-populated with alternative thumbnail sources if no explicit image property is provided. It feels like custom template developers would be the primary audience of this documentation page, so it should be correct.

Steps to reproduce
mkdir quarto-test
cd quarto-test
quarto create blog .
cat > listing-default.ejs << 'EOL'
<% for (const item of items) { %>
<div class="quarto-post image-right" <%= metadataAttrs(item) %>>
<div class="thumbnail">
<a href="<%- item.path %>" class="no-external">
<% if (item.image) { %>
<p><img src="<%- item.image%>" class="thumbnail-image" alt="<%= item['image-alt'] %>"></p>
<% } %>
</a>
</div>
<div class="body">
<h3 class="no-anchor listing-title"><a href="<%- item.path %>" class="no-external"><%= item.title %></a></h3>
<div class="listing-subtitle"><a href="<%- item.path %>" class="no-external"><%= item.subtitle %></a></div>
<div class="listing-categories">
<% for (const category of item.categories) { %>
<div class="listing-category" onclick="window.quartoListingCategory('<%=category%>'); return false;"><%= category %></div>
<% } %>
</div>
<div class="delink listing-description"><a href="<%- item.path %>" class="no-external"><%= item.description %></a></div>
</div>
<div class="metadata"><a href="<%- item.path %>" class="no-external">
<% if (item['date-modified'] === "Invalid Date") { %>
<% if (item.date) { %><div class="listing-date">`<%= item.date %>`{=html}</div><% } %>
<% if (item.author) { %><div class="listing-author"><%= item.author %></div><% } %>
<% } else { %>
<div class="listing-date">`<%= item['date-modified'] %>`{=html}</div>
<% if (item.author) { %><div class="listing-author"><%= item.author %></div><% } %>
<% if (item.date) { %><div class="listing-date" style="color:rgb(192,192,192)">first published on <nobr>`<%= item.date %>`{=html}</nobr></div><% } %>
<% } %>
</a></div>
</div><% } %>
EOL
awk -i inplace 'NR==7{print "  template: listing-default.ejs"}1' index.qmd
quarto preview

Alternatively, check out this repository which contains the same.

With this line

https://github.com/axtimwalde/quarto-test/blob/main/index.qmd#L7

only one thumbnail image is shown, without it, two thumbnail images are shown.

Expected behavior

Two thumbnail images sholud be shown with both the default and the custom template.

Actual behavior

Only the default Quarto provided template shows two thumbnail images. the custom template shows only one, for the listing item that explicitly provides an image property.

Your environment

Plain Ubuntu 23.10 with Firefox as a default browser.

Quarto check output
Check file:///home/saalfeld/workspace/quarto-cli/src/quarto.ts
Quarto 99.9.9
[✓] 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: 99.9.9
      commit: e9d5a9cb82098cae44588c182006b581bb6bf9b4
      Path: /home/saalfeld/workspace/quarto-cli/package/dist/bin

(/) Checking tools....................Check file:///home/saalfeld/workspace/quarto-cli/src/resources/vendor/deno-land/x/puppeteer@9-0-2/mod.ts
[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/bin
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.11.6
      Path: /usr/bin/python3
      Jupyter: (None)

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

[✓] Checking R installation...........(None)

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the provided quarto-test reproduction with quarto preview, using index.qmd and listing-default.ejs to compare the default and custom listing templates. Trace how listing fields are supplied to item.image; done means both templates show thumbnails for items with alternative image sources, without requiring an explicit image property.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.