Fix twitter-card image size tags and options

news/changelog-1.11.md

@@ -88,6 +88,7 @@ All changes included in 1.11:
 ### Websites
 
 - ([#10756](https://github.com/quarto-dev/quarto-cli/issues/10756)): Fix the notebook preview of an embedded `.qmd` file going missing from the output directory when a project is rendered again, which broke its source notebook link.
+- ([#12014](https://github.com/quarto-dev/quarto-cli/issues/12014)): Fix `twitter-card` `image-width` and `image-height` being listed as options although Twitter Cards have no image size tags. They are no longer documented, and setting them prints a warning pointing to `open-graph`, where an image size is used. The size Quarto measures from a local image is no longer written as `twitter:image-height` and `twitter:image-width` tags, only as `og:image:height` and `og:image:width`.
 - ([#12016](https://github.com/quarto-dev/quarto-cli/issues/12016)): Fix `open-graph` `image-width` and `image-height` being dropped when `site-url` is set and Quarto cannot measure the image, such as a remote image. A size declared in the site `open-graph` options no longer applies when a page sets its own `image`, even the same file: declare `image-width` and `image-height` in the page `open-graph` options or in shared metadata such as `_metadata.yml`.
 - ([#14972](https://github.com/quarto-dev/quarto-cli/issues/14972)): Fix the website navbar, sidebar toggle bar, or announcement covering the header of notebook preview pages, which hid the back link, notebook title, and download link. The notebook preview header now sits below the site header.
 - ([#14974](https://github.com/quarto-dev/quarto-cli/issues/14974)): Fix math in `.llms.md` files from `llms-txt` coming out garbled with the default `mathjax` method, and with `katex` and `webtex`. Math is now written as `$...$` and `$$...$$` with the `mathjax`, `katex`, `webtex` and `mathml` methods.
@@ -96,7 +97,7 @@ All changes included in 1.11:
 - ([#15032](https://github.com/quarto-dev/quarto-cli/pull/15032)): Fix the listing feed `image` missing its height and width when a website is rendered from a directory other than the project directory, or when the image path starts with `/`.
 - ([#15039](https://github.com/quarto-dev/quarto-cli/issues/15039)): Fix the open graph and twitter card image of website pages in subdirectories pointing to a missing file when the image comes from a relative `website: image:`, `open-graph: image:` or `twitter-card: image:` under `website:`, and the listing feed image pointing to a missing file when it comes from the `image` of a listing page in a subdirectory. A project relative image path starting with `/` no longer gives a doubled `/` in these URLs when `site-url` ends with `/`.
 - ([#15044](https://github.com/quarto-dev/quarto-cli/issues/15044)): Fix a YAML file listed next to a folder in a listing's `contents` being left out, or another file being used, when a website is rendered from a directory other than the listing page's directory.
-- ([#15050](https://github.com/quarto-dev/quarto-cli/pull/15050)): Support JPEG images when adding image height and width to the listing feed `image`, feed item media, and `og:image` and `twitter:image` metadata. Image files are now detected by content rather than file extension, so an uppercase `.PNG` is measured too.
+- ([#15050](https://github.com/quarto-dev/quarto-cli/pull/15050)): Support JPEG images when adding image height and width to the listing feed `image`, feed item media, and `og:image` metadata. Image files are now detected by content rather than file extension, so an uppercase `.PNG` is measured too.
 - ([#15055](https://github.com/quarto-dev/quarto-cli/issues/15055)): Fix `og:image` and `twitter:image` of website pages using an inline data URI image, such as the ORCID badge of an author, joined to `site-url` instead of the next image of the page or the site `image`. A data URI set as a page, site or listing item `image` is now ignored with a warning for social metadata and listing feeds, as these images are fetched by URL, and listing cards show it as is.
 - ([#15057](https://github.com/quarto-dev/quarto-cli/pull/15057)): Fix a numeric top-level `image-width` or `image-height` in page front matter failing the render. These options were never used, so they are removed from the schema; declare the preview image size under `open-graph` instead.
 - ([#15083](https://github.com/quarto-dev/quarto-cli/pull/15083)): Fix editors offering no completion for the top-level `image-title` option that about pages read, and correct the description of the top-level `image-lazy-loading` option, which only affects the page's image when it appears in a listing.

src/project/types/website/website-meta.ts

@@ -228,7 +228,13 @@ export function metadataHtmlPostProcessor(
       }
 
       // Convert image to absolute href and add height and width
-      const imagePath = resolveImageMetadata(source, project, format, metadata);
+      const imagePath = resolveImageMetadata(
+        source,
+        project,
+        format,
+        metadata,
+        provider.key === kOpenGraph,
+      );
       if (imagePath) {
         if (imagePath.startsWith("/")) {
           // This is a project relative path
@@ -348,6 +354,14 @@ function twitterMetadata(format: Format) {
         }
       },
     );
+    if (
+      twitterData[kImageWidth] !== undefined ||
+      twitterData[kImageHeight] !== undefined
+    ) {
+      warnOnce(
+        "The `twitter-card` options `image-width` and `image-height` are ignored, as Twitter Cards have no image size tags. Set them under `open-graph` instead.",
+      );
+    }
   }
   return metadata;
 }
@@ -375,6 +389,7 @@ function resolveImageMetadata(
   project: ProjectContext,
   format: Format,
   metadata: Metadata,
+  includeSize: boolean,
 ) {
   // populate defaults
   const siteMeta = format.metadata[kWebsite] as Metadata;
@@ -389,10 +404,13 @@ function resolveImageMetadata(
     );
 
     // Update the image information, preferring the size read from the file
-    // over a declared one
+    // over a declared one. Twitter Cards have no image size tags, so only
+    // providers that emit a size get one.
     metadata[kImage] = imgMeta.href;
-    metadata[kImageHeight] = imgMeta.height ?? metadata[kImageHeight];
-    metadata[kImageWidth] = imgMeta.width ?? metadata[kImageWidth];
+    if (includeSize) {
+      metadata[kImageHeight] = imgMeta.height ?? metadata[kImageHeight];
+      metadata[kImageWidth] = imgMeta.width ?? metadata[kImageWidth];
+    }
 
     const altText = format.metadata[kImageAlt];
     if (altText && !metadata[kImageAlt]) {

src/resources/editor/tools/vs-code.mjs

@@ -9185,7 +9185,7 @@ var require_yaml_intelligence_resources = __commonJS({
                 path: {
                   description: {
                     short: "The path to a preview image for the content.",
-                    long: "The path to a preview image for the content. By default, Quarto will use\nthe `image` value from the format metadata. If you provide an \nimage, you may also optionally provide an `image-width` and `image-height`.\n"
+                    long: "The path to a preview image for the content. By default, Quarto will use\nthe `image` value from the format metadata.\n"
                   }
                 }
               },
@@ -9196,16 +9196,6 @@ var require_yaml_intelligence_resources = __commonJS({
                     long: "The alt text for the preview image. By default, Quarto will use\nthe `image-alt` value from the format metadata.\n"
                   }
                 }
-              },
-              "image-width": {
-                number: {
-                  description: "Image width (pixels)"
-                }
-              },
-              "image-height": {
-                number: {
-                  description: "Image height (pixels)"
-                }
               }
             }
           }
@@ -9397,6 +9387,14 @@ var require_yaml_intelligence_resources = __commonJS({
                 string: {
                   description: "`@username` of the website (must be a quoted string)"
                 }
+              },
+              "image-width": {
+                schema: "number",
+                hidden: true
+              },
+              "image-height": {
+                schema: "number",
+                hidden: true
               }
             }
           }
@@ -9421,6 +9419,16 @@ var require_yaml_intelligence_resources = __commonJS({
                     long: "Name that should be displayed for the overall site. If not explicitly \nprovided in the `open-graph` metadata, Quarto will use the website or\nbook `title` by default.\n"
                   }
                 }
+              },
+              "image-width": {
+                number: {
+                  description: "Image width (pixels)"
+                }
+              },
+              "image-height": {
+                number: {
+                  description: "Image height (pixels)"
+                }
               }
             }
           }
@@ -22113,14 +22121,12 @@ var require_yaml_intelligence_resources = __commonJS({
         },
         {
           short: "The path to a preview image for the content.",
-          long: "The path to a preview image for the content. By default, Quarto will\nuse the <code>image</code> value from the format metadata. If you\nprovide an image, you may also optionally provide an\n<code>image-width</code> and <code>image-height</code>."
+          long: "The path to a preview image for the content. By default, Quarto will\nuse the <code>image</code> value from the format metadata."
         },
         {
           short: "The alt text for the preview image.",
           long: "The alt text for the preview image. By default, Quarto will use the\n<code>image-alt</code> value from the format metadata."
         },
-        "Image width (pixels)",
-        "Image height (pixels)",
         "Port to listen on (defaults to random value between 3000 and\n8000)",
         "Hostname to bind to (defaults to 127.0.0.1)",
         "Use an exernal application to preview the project.",
@@ -22145,14 +22151,12 @@ var require_yaml_intelligence_resources = __commonJS({
         },
         {
           short: "The path to a preview image for the content.",
-          long: "The path to a preview image for the content. By default, Quarto will\nuse the <code>image</code> value from the format metadata. If you\nprovide an image, you may also optionally provide an\n<code>image-width</code> and <code>image-height</code>."
+          long: "The path to a preview image for the content. By default, Quarto will\nuse the <code>image</code> value from the format metadata."
         },
         {
           short: "The alt text for the preview image.",
           long: "The alt text for the preview image. By default, Quarto will use the\n<code>image-alt</code> value from the format metadata."
         },
-        "Image width (pixels)",
-        "Image height (pixels)",
         {
           short: "Card style",
           long: 'Card style (<code>summary</code> or\n<code>summary_large_image</code>).\nIf this is not provided, the best style will automatically selected\nbased upon other metadata. You can learn more about Twitter Card styles\n<a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">here</a>.'
@@ -22169,19 +22173,19 @@ var require_yaml_intelligence_resources = __commonJS({
         },
         {
           short: "The path to a preview image for the content.",
-          long: "The path to a preview image for the content. By default, Quarto will\nuse the <code>image</code> value from the format metadata. If you\nprovide an image, you may also optionally provide an\n<code>image-width</code> and <code>image-height</code>."
+          long: "The path to a preview image for the content. By default, Quarto will\nuse the <code>image</code> value from the format metadata."
         },
         {
           short: "The alt text for the preview image.",
           long: "The alt text for the preview image. By default, Quarto will use the\n<code>image-alt</code> value from the format metadata."
         },
-        "Image width (pixels)",
-        "Image height (pixels)",
         "Locale of open graph metadata",
         {
           short: "Name that should be displayed for the overall site",
           long: "Name that should be displayed for the overall site. If not explicitly\nprovided in the <code>open-graph</code> metadata, Quarto will use the\nwebsite or book <code>title</code> by default."
         },
+        "Image width (pixels)",
+        "Image height (pixels)",
         "Footer left content. Supports markdown formatting.",
         "Footer right content. Supports markdown formatting.",
         "Footer center content. Supports markdown formatting.",
@@ -25722,12 +25726,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 218217,
+        _internalId: 218225,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 218209,
+            _internalId: 218217,
             type: "enum",
             enum: [
               "png",
@@ -25743,7 +25747,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 218216,
+            _internalId: 218224,
             type: "anyOf",
             anyOf: [
               {