Visible alt text width and fallback alt text (#385)

* implement css props for visible alt text

* and fallback label

* limit width for visible alt text on some grid items

Author: outofambit

src/components/GridItem/Example.astro

@@ -20,9 +20,12 @@ const { item, lazyLoad } = Astro.props;
     alt={item.data.featuredImageAlt}
     widths={[325, 400]}
     sizes={`325px, (min-width: 768px) 400px`}
-    class="w-3/5"
     loading={lazyLoad ? "lazy" : "eager"}
+    class="w-3/5"
+    visibleAltTextClass="max-w-[calc(60%-30px)]"
   />
+  <!--  visible alt text class keeps the alt text within
+    the narrower image width given in class prop -->
   <p class="text-body mt-xs break-words break-keep group-hover:underline">
     {item.data.title}
   </p>

src/components/GridItem/Library.astro

@@ -34,7 +34,10 @@ if (!/[.!]\)?$/.test(description)) {
     alt={item.data.featuredImageAlt}
     width="400"
     class="w-3/5"
+    visibleAltTextClass="max-w-[calc(60%-30px)]"
   />
+  <!--  visible alt text class keeps the alt text within
+    the narrower image width given in class prop -->
   <p
     class="text-xl mt-xs text-wrap break-words break-keep group-hover:underline"
   >

src/components/Image/index.astro

@@ -1,13 +1,19 @@
 ---
+import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
 import type { ComponentProps } from "astro/types";
 import { Image } from "astro:assets";
 type Props = ComponentProps<typeof Image> & {
   /** Defaults to 'photo' aspect ratio */
   aspectRatio?: "photo" | "square" | "none";
   caption?: string;
   containerClass?: string;
+  visibleAltTextClass?: string;
 };
 const { props } = Astro;
+
+const currentLocale = getCurrentLocale(Astro.url.pathname);
+const t = await getUiTranslator(currentLocale);
+const noAltText = t("No alt text");
 ---
 
 <div class={props.containerClass || "relative w-fit h-fit"}>
@@ -16,19 +22,28 @@ const { props } = Astro;
   <Image
     {...props}
     class=""
-    class:list={(props.class,
-    {
-      "object-cover": props.aspectRatio !== "none",
-      "aspect-square": props.aspectRatio === "square",
-      "aspect-photo":
-        props.aspectRatio === "photo" || props.aspectRatio === undefined,
-    })}
+    class:list={[
+      props.class,
+      {
+        "object-cover": props.aspectRatio !== "none",
+        "aspect-square": props.aspectRatio === "square",
+        "aspect-photo":
+          props.aspectRatio === "photo" || props.aspectRatio === undefined,
+      },
+    ]}
   />
   <p
     aria-hidden
-    class="renderable-alt bg-bg-gray-40 line-clamp-3 absolute top-0 mt-sm mx-sm px-[7.5px] pb-[2.5px] rounded-xl text-body-caption text-ellipsis"
+    class:list={[
+      "renderable-alt",
+      "text-body-caption",
+      "bg-bg-gray-40 line-clamp-3 absolute top-0 mt-sm mx-sm px-[7.5px] pb-[2.5px] rounded-xl text-ellipsis",
+      props.visibleAltTextClass,
+    ]}
   >
-    {props.alt}
+    <!-- It shouldn't be possible to pass no alt text, but if its missing
+    show a '?' so the component doesn't look broken  -->
+    {props.alt || noAltText}
   </p>
   {props.caption && <p class="text-body-caption mt-xs">{props.caption}</p>}
 </div>

src/content/ui/en.yaml

@@ -42,6 +42,7 @@ Show Code: Show Code
 Donate to p5.js: Donate to p5.js
 Download p5.js: Download p5.js
 No Results: No entries found for that search.
+No alt text: No alt text
 briefPageDescriptions:
   Reference: Find easy explanations for every piece of p5.js code.
   Examples: Explore the possibilities of p5.js with short examples.