tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix broken thumbnail images not taking up appropriate size on ff (#2486)

Browse Source 
Closes #2485 

Also adds alt text to collection thumbnail images.
This commit is contained in:
Emma Segal-Grossman 2025-03-18 18:53:10 -04:00 committed by GitHub
parent bcb73932d4
commit 89a6e84377
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/features/collections/collection-thumbnail.ts
View File

@ -1,4 +1,4 @@
import { localized } from "@lit/localize"; import { localized, msg, str } from "@lit/localize";
import { html } from "lit"; import { html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
@ -38,10 +38,16 @@ export class CollectionThumbnail extends BtrixElement {
@property({ type: String }) @property({ type: String })
src?: string; src?: string;
@property({ type: String })
collectionName?: string;
render() { render() {
return html` return html`
<img <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} src=${this.src || DEFAULT_THUMBNAIL_VARIANT.path}
/> />
`; `;

1
frontend/src/features/collections/collections-grid.ts
View File

@ -101,6 +101,7 @@ export class CollectionsGrid extends BtrixElement {
([name]) => name === collection.defaultThumbnailName, ([name]) => name === collection.defaultThumbnailName,
)?.[1].path || collection.thumbnail?.path, )?.[1].path || collection.thumbnail?.path,
)} )}
collectionName=${collection.name}
></btrix-collection-thumbnail> ></btrix-collection-thumbnail>
${this.renderDateBadge(collection)} ${this.renderDateBadge(collection)}
</div> </div>