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

未关闭 适合新手
#1,155 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
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 分钟
30 天内合并 PR
207

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

quarto-dev/q2 的其他 Issue

查看 quarto-dev/q2 的全部 Issue

相似的 Issue

更多 Rust Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。