Support og:image:alt from fig-alt

news/changelog-1.6.md

@@ -92,6 +92,7 @@ All changes included in 1.6:
 - ([#10311](https://github.com/quarto-dev/quarto-cli/issues/10311)): Loosen auto-discovery of images for OpenGraph cards.
 - ([#10567](https://github.com/quarto-dev/quarto-cli/issues/10567)): Generate breadcrumbs correctly for documents using a level-1 heading as the title.
 - ([#10616](https://github.com/quarto-dev/quarto-cli/issues/10268)): Add a `z-index` setting to the 'back to top' button to ensure it is always visible.
+- ([#10864](https://github.com/quarto-dev/quarto-cli/issues/10864)): Support detection of `og:image:alt` attribute from auto-discovered images.
 
 ### Quarto Blog
 

src/project/types/website/listing/website-listing-feed.ts

@@ -163,7 +163,7 @@ export async function createFeed(
 
   // Add any image metadata
   const image = options.image || format.metadata[kImage] as string ||
-    websiteImage(project.config);
+    websiteImage(project.config)?.src;
   if (image) {
     feed.image = {
       title: feedTitle,

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

@@ -41,12 +41,16 @@ export function findDescription(doc: Document): string | undefined {
 
 export function findPreviewImg(
   doc: Document,
-): string | undefined {
+): { src: string; alt?: string } | undefined {
   const imgEl = findPreviewImgEl(doc);
   if (imgEl) {
     const src = getDecodedAttribute(imgEl, "src");
+    const alt = getDecodedAttribute(imgEl, "alt");
     if (src !== null) {
-      return src;
+      return {
+        src,
+        alt: alt ?? undefined,
+      };
     } else {
       return undefined;
     }

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

@@ -50,6 +50,7 @@ import { join } from "../../../deno_ral/path.ts";
 type WebsiteConfigKey =
   | "title"
   | "image"
+  | "image-alt"
   | "description"
   | "favicon"
   | "site-url"
@@ -173,8 +174,16 @@ export function websiteBaseurl(project?: ProjectConfig): string | undefined {
   return websiteConfigString(kSiteUrl, project);
 }
 
-export function websiteImage(project?: ProjectConfig): string | undefined {
-  return websiteConfigString(kImage, project);
+export function websiteImage(
+  project?: ProjectConfig,
+): { src: string; alt?: string } | undefined {
+  const src = websiteConfigString(kImage, project);
+  if (src) {
+    const alt = websiteConfigString("image-alt", project);
+    return { src, alt };
+  } else {
+    return undefined;
+  }
 }
 
 export function websiteDescription(

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

@@ -180,8 +180,9 @@ export function metadataHtmlPostProcessor(
 
       // find a preview image if one is not provided
       if (metadata[kImage] === undefined && format.metadata[kImage] !== false) {
-        metadata[kImage] = findPreviewImg(doc) ||
-          websiteImage(project.config);
+        const previewImg = findPreviewImg(doc) || websiteImage(project.config);
+        metadata[kImage] = previewImg ? previewImg.src : undefined;
+        metadata[kImageAlt] = previewImg ? previewImg.alt : undefined;
       }
 
       // cook up a description if one is not provided

tests/docs/smoke-all/2024/10/30/issue-10864/_quarto.yml

@@ -0,0 +1,20 @@
+project:
+  type: website
+
+website:
+  title: "issue-10864"
+  open-graph: true
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home
+      - about.qmd
+
+format:
+  html:
+    theme: cosmo
+    css: styles.css
+    toc: true
+
+
+

tests/docs/smoke-all/2024/10/30/issue-10864/about.qmd

@@ -0,0 +1,13 @@
+---
+title: "About"
+_quarto:
+  tests:
+    html:
+      ensureFileRegexMatches:
+        - ['<meta property="og:image:alt" content="Quarto logo">']
+        - []
+---
+
+About this site
+
+![](https://quarto.org/quarto.png){fig-alt="Quarto logo" .preview-image}

tests/docs/smoke-all/2024/10/30/issue-10864/index.qmd

@@ -0,0 +1,7 @@
+---
+title: "issue-10864"
+---
+
+This is a Quarto website.
+
+To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

tests/docs/smoke-all/2024/10/30/issue-10864/styles.css

@@ -0,0 +1 @@
+/* css styles */