quarto-dev / quarto-dev/quarto-cli
`item.image` field not auto populated with alternative sources for custom listing templates
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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