About Page Img Alt Support

Add support for `image-alt` in about page images

Author: dragonstyle

news/changelog-1.3.md

@@ -4,6 +4,10 @@
 
 - Improve the performance of extremely large documents with margin elements by improving the efficiency of positioning the elements.
 
+## About Pages
+
+- Add support for `image-alt` which provides alternate text for the about page image. (#3010)
+
 ## Listings
 
 - Listings now support `template-params`, which will be passed to custom EJS templates when a listing is rendered.

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

@@ -40,7 +40,7 @@ const kType = "type";
 const kLinks = "links";
 
 const kImageWidth = "image-width";
-
+const kImageAlt = "image-alt";
 const kImageShape = "image-shape";
 const kImageShapeRound = "round";
 const kImageShapeRounded = "rounded";
@@ -70,13 +70,15 @@ interface AboutPage {
   options: Record<string, unknown>;
   custom: boolean;
   image?: Href;
+  [kImageAlt]?: string;
   links?: Array<NavItem>;
 }
 
 interface AboutPageEjsData {
   title: string;
   body: string;
   image?: string;
+  [kImageAlt]?: string;
   links?: NavItem[];
   options: Record<string, unknown>;
 }
@@ -147,7 +149,7 @@ async function readAbout(
       aboutObj: Record<string, unknown>,
       aboutPage: AboutPage,
     ) => {
-      const knownFieldList = ["image", "template", "links"];
+      const knownFieldList = ["image", kImageAlt, "template", "links"];
       for (const key of Object.keys(aboutObj)) {
         if (!knownFieldList.includes(key)) {
           aboutPage.options[key] = aboutObj[key];
@@ -194,6 +196,9 @@ async function readAbout(
       if (format.metadata[kImage]) {
         aboutPage.image = format.metadata[kImage] as Href;
       }
+      if (format.metadata[kImageAlt]) {
+        aboutPage[kImageAlt] = format.metadata[kImageAlt] as string;
+      }
 
       // Resolve any options
       resolveOptions(about, {}, aboutPage);
@@ -222,6 +227,15 @@ async function readAbout(
         }
       }
 
+      const aboutImageAlt = aboutObj[kImageAlt];
+      if (aboutImageAlt) {
+        aboutPage[kImageAlt] = aboutImageAlt as Href;
+      } else {
+        if (format.metadata[kImageAlt]) {
+          aboutPage[kImageAlt] = format.metadata[kImageAlt] as Href;
+        }
+      }
+
       const aboutLinks = aboutObj[kLinks] as Array<string | NavItem>;
       if (aboutLinks) {
         const links: NavItem[] = [];
@@ -284,6 +298,7 @@ const aboutPagePostProcessor = (
       title,
       body,
       image: aboutPage.image,
+      [kImageAlt]: aboutPage[kImageAlt],
       links: aboutPage.links,
       options: aboutPage.options,
     };

src/resources/projects/website/about/_image.ejs.html

@@ -15,9 +15,17 @@
   }
 }
 
+const altText = () => {
+  if (about['image-alt']) {
+    return `alt="${about['image-alt']}" `;
+  } else {
+    return "";
+  }
+}
+
 const customClz = imgOpts.classes !== undefined ? imgOpts.classes : "";
+%> 
 
-  %> 
 <% if (about.image) { %>
-<img src="<%= about.image %>" class="about-image<%= imgClz %> <%= customClz %>" <%= imageSize() %> />
+<img src="<%= about.image %>" <%= altText() %>class="about-image<%= imgClz %> <%= customClz %>" <%= imageSize() %> />
 <%}%>