quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.57k stars 294 forks source link

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

Open axtimwalde opened 2 months ago

axtimwalde commented 2 months ago

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/
mcanouil commented 2 months ago

I believe it's because the "PreviewImage" is filled in TypeScript which is bypassed when using a custom listing.

Note that the following custom listing is enough to reproduce:

  1. quarto create project blog demo
  2. add template: listing.ejs in index.qmd.
<ul>
<% for (const item of items) { %>
  <li><a href="<%- item.path %>"><%= item.title %></a></li>
  <p><img src="<%- item.image%>" width="100px"></p>
<% } %>
</ul>