From 89a6e843775491dd4f42f87da975ea4485078512 Mon Sep 17 00:00:00 2001
From: Emma Segal-Grossman <hi@emma.cafe>
Date: Tue, 18 Mar 2025 18:53:10 -0400
Subject: [PATCH] Fix broken thumbnail images not taking up appropriate size on
 ff (#2486)

Closes #2485

Also adds alt text to collection thumbnail images.
---
 .../src/features/collections/collection-thumbnail.ts   | 10 ++++++++--
 frontend/src/features/collections/collections-grid.ts  |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/collections/collection-thumbnail.ts b/frontend/src/features/collections/collection-thumbnail.ts
index daebfbc3..05971ca3 100644
--- a/frontend/src/features/collections/collection-thumbnail.ts
+++ b/frontend/src/features/collections/collection-thumbnail.ts
@@ -1,4 +1,4 @@
-import { localized } from "@lit/localize";
+import { localized, msg, str } from "@lit/localize";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -38,10 +38,16 @@ export class CollectionThumbnail extends BtrixElement {
   @property({ type: String })
   src?: string;
 
+  @property({ type: String })
+  collectionName?: string;
+
   render() {
     return html`
       <img
-        class="aspect-video rounded-lg bg-slate-50 object-cover"
+        class="aspect-video size-full rounded-lg bg-slate-50 object-cover"
+        alt=${this.collectionName
+          ? msg(str`Thumbnail image for “${this.collectionName}” collection`)
+          : msg("Thumbnail image")}
         src=${this.src || DEFAULT_THUMBNAIL_VARIANT.path}
       />
     `;
diff --git a/frontend/src/features/collections/collections-grid.ts b/frontend/src/features/collections/collections-grid.ts
index 7675e32f..989ebce0 100644
--- a/frontend/src/features/collections/collections-grid.ts
+++ b/frontend/src/features/collections/collections-grid.ts
@@ -101,6 +101,7 @@ export class CollectionsGrid extends BtrixElement {
                         ([name]) => name === collection.defaultThumbnailName,
                       )?.[1].path || collection.thumbnail?.path,
                     )}
+                    collectionName=${collection.name}
                   ></btrix-collection-thumbnail>
                   ${this.renderDateBadge(collection)}
                 </div>