Grid listing ignores image-height, so thumbnails render at full size

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,155 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
73/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
rust
Ambito
frontend

Direzione di ricerca

Inizia tracciando come le griglie degli elenchi renderizzano il campo image e come l’opzione image-height dell’elenco raggiunge quel percorso di rendering; il payload non indica file di implementazione né test. Confronta il markup della miniatura generato per i casi di altezza predefinita ed esplicita con gli esempi di Quarto 1. Il lavoro è completato quando entrambi i casi applicano l’altezza prevista e la classe card-img senza modificare l’immagine sorgente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

In a grid listing, q2 ignores image-height. Quarto 1 gives each thumbnail an inline height (150px by default, or the image-height value) and the class card-img. q2 gives neither, so a large image shows at its full size. In our site, the thumbnails overlapped the next cards and made the page about 2,000px wide.

Versions

  • q2 0.44.0-nightly.20261110
  • Quarto 1.10.18 (expected output)
  • macOS, arm64

Repro

_quarto.yml:

project:
  type: website
  render:
    - "*.qmd"
    - "posts/*.md"

default.qmd:

---
title: Default height
listing:
  contents: "posts/*.md"
  type: grid
  fields: [image, title]
---

explicit.qmd:

---
title: Explicit height
listing:
  contents: "posts/*.md"
  type: grid
  image-height: 100px
  fields: [image, title]
---

posts/alpha.md, with posts/wide.png as any large image (we used 1600x1000):

---
title: "Alpha"
image: wide.png
---

Text.

Command:

q2 render

Expected (Quarto 1)

<!-- default.html -->
<img loading="lazy" src="./posts/wide.png" class="thumbnail-image card-img" style="height: 150px;">
<!-- explicit.html -->
<img loading="lazy" src="./posts/wide.png" class="thumbnail-image card-img" style="height: 100px;">

Actual (q2)

<!-- default.html -->
<img src="posts/wide.png" class="thumbnail-image" alt="" loading="lazy">
<!-- explicit.html -->
<img src="posts/wide.png" class="thumbnail-image" alt="" loading="lazy">

There is no warning.

Workaround

A stylesheet rule on the listing page:

.quarto-grid-item .card-img-top img.thumbnail-image {
  height: 150px;
  width: 100%;
  object-fit: cover;
}
Lingua principale
Rust
Stelle
302
Fork
22
Merge medio
5h 6m
PR unite (30g)
207

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di quarto-dev/q2

Tutte le issue di quarto-dev/q2

Issue simili

Altre issue su Rust

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.