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

オープン 初心者向け
  • 何か問題がありますか？
#1,155 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
73/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
rust
領域
frontend

調査の方向性

まず、グリッド形式の一覧が image フィールドをどのようにレンダリングするか、また一覧の image-height オプションがそのレンダリング経路にどう渡されるかを追ってください。payload には実装ファイルやテストの名前は記載されていません。デフォルトの高さと明示的な高さの場合に生成されるサムネイルのマークアップを、Quarto 1 の例と比較してください。どちらの場合も、元画像を変更せずに期待される高さと card-img クラスが適用されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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;
}
主要言語
Rust
スター
302
フォーク
22
平均マージ
5時間 6分
マージ済み PR（30日）
207

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/q2 のほかの issue

quarto-dev/q2 の issue をすべて見る

似ている issue

Rust の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。