quarto-dev / quarto-dev/quarto-cli

`image-width` and `image-height` not working with `twitter-card`

Open
#12,014 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug html
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Despite specifying image-width and image-height, the respective properties do not appear in the resulting HTML.

Steps to reproduce

Start a new Quarto book project in RStudio and set _quarto.yml to the following:

project:
  type: book

book:
  title: "temp"
  author: "author"
  date: "2025. 02. 03."
  twitter-card:
    image: cover.png
    image-width: 1196
    image-height: 1185
  chapters:
    - index.qmd
    - intro.qmd
    - summary.qmd
    - references.qmd

bibliography: references.bib

format:
  html:
    theme:
      - cosmo
      - brand
  pdf:
    documentclass: scrreprt
Expected behavior

The respective properties (I think twitter:image:height and twitter:image:width) should appear in the HTML.

Actual behavior

The relevant part of the resulting HTML:

<meta name="twitter:title" content="temp">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="cover.png">
<meta name="twitter:card" content="summary_large_image">

I.e., image-width and image-height does not appear at all.

Your environment
  • IDE: RStudio 2024.12.0 Build 467
  • OS: Windows 10
Quarto check output
Quarto 1.6.40
[>] Checking environment information...
      Quarto cache location: \AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.6.40
      Path: C:\Program Files\Quarto\bin
      CodePage: 1250

[>] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: \AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.13.1
      Path: C:/Program Files/Python313/python.exe
      Jupyter: 5.7.2
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.4.2
      Path: C:/PROGRA~1/R/R-44~1.2
      LibPaths:
        - /AppData/Local/R/win-library/4.4
        - C:/Program Files/R/R-4.4.2/library
      knitr: 1.49
      rmarkdown: 2.29

[>] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the shown _quarto.yml configuration and inspect the generated HTML metadata. Trace how the twitter-card options are processed, then verify that image-width and image-height produce the expected twitter:image:width and twitter:image:height tags.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.