Merge pull request #9396 from quarto-dev/bugfix/9356-b

html,websites - Don't change column classes in about

news/changelog-1.5.md

@@ -41,6 +41,7 @@ All changes included in 1.5:
 - ([#8830](https://github.com/quarto-dev/quarto-cli/issues/8830)): Add support for `tools-collapse` to control whether the tools collapse when the navbar does.
 - ([#8851](https://github.com/quarto-dev/quarto-cli/issues/8851)): Don't strip `index.html` from external paths.
 - ([#8977](https://github.com/quarto-dev/quarto-cli/issues/8977)): Don't decorate about links within external link icons.
+- ([#9356](https://github.com/quarto-dev/quarto-cli/issues/9356)): Don't process column classes for figures inside the About divs.
 
 ## Book
 

src/format/html/format-html-bootstrap.ts

@@ -1461,6 +1461,13 @@ const figCapInCalloutMarginProcessor: MarginNodeProcessor = {
 
 const kPreviewFigColumnForwarding = [".grid"];
 
+const isInsideAbout = (el: Element) =>
+  !!findParent(
+    el,
+    (parent) =>
+      Array.from(parent.classList).some((x) => x.startsWith("quarto-about-")),
+  );
+
 const processFigureOutputs = (doc: Document) => {
   // For any non-margin figures, we want to actually place the figure itself
   // into the column, and leave the caption as is, if possible
@@ -1497,13 +1504,19 @@ const processFigureOutputs = (doc: Document) => {
 
     // If there is a single figure, then forward the column class onto that
     const figures = columnEl.querySelectorAll("figure img.figure-img");
-    if (figures && figures.length === 1) {
+
+    if (
+      figures && figures.length === 1 && !isInsideAbout(figures[0] as Element)
+    ) {
       moveColumnClasses(columnEl, figures[0] as Element);
     } else {
       const layoutFigures = columnEl.querySelectorAll(
         ".quarto-layout-panel > figure.figure .quarto-layout-row",
       );
-      if (layoutFigures && layoutFigures.length === 1) {
+      if (
+        layoutFigures && layoutFigures.length === 1 &&
+        !isInsideAbout(layoutFigures[0] as Element)
+      ) {
         moveColumnClasses(columnEl, layoutFigures[0] as Element);
       }
     }

tests/docs/smoke-all/2024/04/17/9356/.gitignore

@@ -0,0 +1 @@
+/.quarto/

tests/docs/smoke-all/2024/04/17/9356/_quarto.yml

@@ -0,0 +1,19 @@
+project:
+  type: website
+
+website:
+  title: "Reprex"
+  navbar:
+    logo: "https://quarto.org/quarto.png"
+    right:
+      - about.qmd
+      - icon: github
+        href: https://github.com/
+      - icon: twitter
+        href: https://twitter.com
+  sidebar:
+    logo: "https://quarto.org/quarto.png"
+format:
+  html:
+    theme: cosmo
+    css: styles.css

tests/docs/smoke-all/2024/04/17/9356/about.qmd

@@ -0,0 +1,20 @@
+---
+title: "Home"
+comments: false
+about: 
+  id: about-pec
+  template: solana
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - ["div.quarto-about-solana.column-body"]
+---
+
+::: {#about-pec}
+
+![a pic](https://quarto.org/quarto.png)
+
+Some text here.
+
+:::

tests/docs/smoke-all/2024/04/17/9356/index.qmd

@@ -0,0 +1,7 @@
+---
+title: "Reprex"
+page-layout: full
+title-block-banner: true
+---
+
+

tests/docs/smoke-all/2024/04/17/9356/styles.css

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

tests/smoke/smoke-all.test.ts

@@ -280,4 +280,7 @@ function findProjectOutputDir(input: string) {
   if (type === "book") {
     return "_book";
   }
+  if (type === "website") {
+    return (yaml as any)?.project?.["output-dir"] || "_site";
+  }
 }