Merge pull request #11226 from quarto-dev/bugfix/10311

Loosen image auto-discovery for OpenGraph

news/changelog-1.6.md

@@ -86,6 +86,7 @@ All changes included in 1.6:
 - ([#2671](https://github.com/quarto-dev/quarto-cli/issues/2671)): Ensure that `--output-dir` works across filesystem boundaries.
 - ([#8517](https://github.com/quarto-dev/quarto-cli/issues/8571)), ([#10829](https://github.com/quarto-dev/quarto-cli/issues/10829)): Allow listing categories with non-alphanumeric characters such as apostrophes, etc.
 - ([#8932](https://github.com/quarto-dev/quarto-cli/issues/8932)): Escape render ids in markdown pipeline to allow special characters in sidebars/navbars, etc.
+- ([#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.
 

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

@@ -564,7 +564,7 @@ export function readRenderedContents(
 
   // Find a preview image, if present
   const computePreviewImage = (): PreviewImage | undefined => {
-    const previewImageEl = findPreviewImgEl(doc, false);
+    const previewImageEl = findPreviewImgEl(doc);
     if (previewImageEl) {
       const previewImageSrc = getDecodedAttribute(previewImageEl, "src");
       if (previewImageSrc !== null) {

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

@@ -41,9 +41,8 @@ export function findDescription(doc: Document): string | undefined {
 
 export function findPreviewImg(
   doc: Document,
-  strict: boolean,
 ): string | undefined {
-  const imgEl = findPreviewImgEl(doc, strict);
+  const imgEl = findPreviewImgEl(doc);
   if (imgEl) {
     const src = getDecodedAttribute(imgEl, "src");
     if (src !== null) {
@@ -58,7 +57,6 @@ export function findPreviewImg(
 
 export function findPreviewImgEl(
   doc: Document,
-  strict: boolean,
 ): Element | undefined {
   // look for an image explicitly marked as the preview image (.class .preview-image)
   const match = doc.querySelector(`img.${kPreviewImgClass}`);
@@ -86,13 +84,14 @@ export function findPreviewImgEl(
   }
 
   // as a last resort, just use the first _local_ image found within the document body
-  if (!strict) {
-    const autoImg = doc.querySelector("#quarto-document-content img");
-    if (autoImg) {
-      const src = autoImg.getAttribute("src");
-      if (src && !src.startsWith("http:") && !src.startsWith("https:")) {
-        return autoImg;
-      }
+  const autoImgs = Array.from(
+    doc.querySelectorAll("#quarto-document-content img"),
+  );
+  for (const autoImgN of autoImgs) {
+    const autoImg = autoImgN as Element;
+    const src = getDecodedAttribute(autoImg, "src");
+    if (src && !src.startsWith("http:") && !src.startsWith("https:")) {
+      return autoImg;
     }
   }
 }

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

@@ -180,7 +180,7 @@ export function metadataHtmlPostProcessor(
 
       // find a preview image if one is not provided
       if (metadata[kImage] === undefined && format.metadata[kImage] !== false) {
-        metadata[kImage] = findPreviewImg(doc, true) ||
+        metadata[kImage] = findPreviewImg(doc) ||
           websiteImage(project.config);
       }
 
@@ -249,7 +249,6 @@ function opengraphMetadata(
   if (siteMeta && siteMeta[kTitle]) {
     metadata[kSiteName] = siteMeta[kTitle];
   }
-
   // Read open graph data in
   if (openGraph && typeof openGraph === "object") {
     [

tests/docs/smoke-all/2024/10/28/issue-10311/.gitignore

@@ -0,0 +1,5 @@
+_site/
+.quarto
+/.quarto/
+*jupyter_cache/
+*.jupyter_cache*

tests/docs/smoke-all/2024/10/28/issue-10311/_quarto.yml

@@ -0,0 +1,20 @@
+project:
+  type: website
+
+website:
+  title: "today"
+  open-graph: true
+  page-footer:
+    center: |
+      Footer image:
+      [![](/profile.jpg)](https://quarto.org/)
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home
+      - posts.qmd
+
+format:
+  html:
+    theme: cosmo
+    toc: true

tests/docs/smoke-all/2024/10/28/issue-10311/index.qmd

@@ -0,0 +1,12 @@
+---
+title: "Home"
+listing:
+  contents:
+    - "posts.qmd"
+  type: grid 
+  sort: false
+_quarto:
+  render-project: true
+---
+
+

tests/docs/smoke-all/2024/10/28/issue-10311/posts.qmd

@@ -0,0 +1,7 @@
+---
+title: "Listing Example"
+listing:
+  contents: posts
+_quarto:
+  render-project: true
+---

tests/docs/smoke-all/2024/10/28/issue-10311/posts/a-test-post-og/index.qmd

@@ -0,0 +1,34 @@
+---
+date: '2024-07-20T20:47:56-04:00'
+title: "Yes, opengraph image"
+_quarto:
+  render-project: true
+  tests:
+    html:
+      ensureFileRegexMatches:
+        - 
+          - '\<meta property="og:image" content="index_files'
+        - []
+---
+
+Testing images.
+
+```{python}
+# | label: fig-polar
+# | fig-cap: "A line plot on a polar axis"
+# | classes: preview-image
+
+
+import numpy as np
+import matplotlib.pyplot as plt
+
+r = np.arange(0, 2, 0.01)
+theta = 2 * np.pi * r
+fig, ax = plt.subplots(
+  subplot_kw = {'projection': 'polar'} 
+)
+ax.plot(theta, r)
+ax.set_rticks([0.5, 1, 1.5, 2])
+ax.grid(True)
+plt.show()
+```

tests/docs/smoke-all/2024/10/28/issue-10311/posts/a-test-post/index.qmd

@@ -0,0 +1,33 @@
+---
+date: '2024-07-20T20:47:56-04:00'
+title: "This has no ogimage"
+_quarto:
+  render-project: true
+  tests:
+    html:
+      ensureFileRegexMatches:
+        - 
+          - '\<meta property="og:image" content="index_files'
+        - []
+---
+
+Testing images.
+
+```{python}
+#| label: fig-polar
+#| fig-cap: "A line plot on a polar axis"
+
+
+import numpy as np
+import matplotlib.pyplot as plt
+
+r = np.arange(0, 2, 0.01)
+theta = 2 * np.pi * r
+fig, ax = plt.subplots(
+  subplot_kw = {'projection': 'polar'} 
+)
+ax.plot(theta, r)
+ax.set_rticks([0.5, 1, 1.5, 2])
+ax.grid(True)
+plt.show()
+```

tests/docs/smoke-all/2024/10/28/issue-5625/_quarto.yml

@@ -0,0 +1,22 @@
+project:
+  type: website
+
+website:
+  title: "myblog"
+  image: "/posts/post-with-code/image.jpg"
+  open-graph: true
+  page-footer:
+    center: |
+      Footer image:
+      [![](/profile.jpg)](https://quarto.org/)
+  navbar:
+    right:
+      - icon: github
+        href: https://github.com/
+      - icon: twitter
+        href: https://twitter.com
+
+format:
+  html:
+    theme: cosmo
+    css: styles.css

tests/docs/smoke-all/2024/10/28/issue-5625/index.qmd

@@ -0,0 +1,15 @@
+---
+title: "issue-5625"
+_quarto:
+  render-project: true
+  tests:
+    html:
+      ensureFileRegexMatches:
+        - 
+          - '<meta property="og:image" content="/posts/post-with-code/image.jpg">'
+        - []
+---
+
+This is a Quarto website.
+
+To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

tests/docs/smoke-all/2024/10/28/issue-5625/styles.css

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