Allow input of alternative text for collection and community logos/th…

src/app/collection-page/collection-form/collection-form.models.ts

@@ -74,4 +74,9 @@ export const collectionFormModels: DynamicFormControlModel[] = [
     name: 'dc.rights.license',
     spellCheck: environment.form.spellCheck,
   }),
+  new DynamicTextAreaModel({
+    id: 'thumbnail',
+    name: 'dspace.thumbnail.description',
+    spellCheck: environment.form.spellCheck,
+  }),
 ];

src/app/collection-page/collection-page.component.html

@@ -15,7 +15,9 @@
                 @if (logoRD$) {
                   <ds-comcol-page-logo
                     [logo]="(logoRD$ | async)?.payload"
-                    [alternateText]="'collection.logo' | translate">
+                    [alternateText]="collection.descriptionThumbnail ?
+                      collection.descriptionThumbnail :
+                      'collection.logo' | translate">
                   </ds-comcol-page-logo>
                 }
                 <!-- Handle -->

src/app/community-page/community-form/community-form.component.ts

@@ -94,6 +94,11 @@ export class CommunityFormComponent extends ComColFormComponent<Community> imple
       name: 'dc.description.tableofcontents',
       spellCheck: environment.form.spellCheck,
     }),
+    new DynamicTextAreaModel({
+      id: 'thumbnail',
+      name: 'dspace.thumbnail.description',
+      spellCheck: environment.form.spellCheck,
+    }),
   ];
 
   public constructor(protected formService: DynamicFormService,

src/app/community-page/community-page.component.html

@@ -7,9 +7,13 @@
             <header class="comcol-header me-auto">
               <!-- Community name -->
               <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
-              <!-- Community logo -->
+              <!-- Community -->
               @if (logoRD$) {
-                <ds-comcol-page-logo [logo]="(logoRD$ | async)?.payload" [alternateText]="'community.logo' | translate">
+                <ds-comcol-page-logo
+                  [logo]="(logoRD$ | async)?.payload"
+                  [alternateText]="communityPayload.descriptionThumbnail ?
+                    communityPayload.descriptionThumbnail :
+                    'community.logo' | translate">
                 </ds-comcol-page-logo>
               }
               <!-- Handle -->

src/app/core/shared/collection.model.ts

@@ -145,6 +145,14 @@ export class Collection extends DSpaceObject implements ChildHALResource, Handle
     return this.firstMetadataValue('dc.description.tableofcontents');
   }
 
+  /**
+   * The thumbail description of this Collection
+   * Corresponds to the metadata field dspace.thumbnail.description
+   */
+  get descriptionThumbnail(): string {
+    return this.firstMetadataValue('dspace.thumbnail.description');
+  }
+
   getParentLinkKey(): keyof this['_links'] {
     return 'parentCommunity';
   }

src/app/core/shared/community.model.ts

@@ -126,6 +126,14 @@ export class Community extends DSpaceObject implements ChildHALResource, HandleO
     return this.firstMetadataValue('dc.description.tableofcontents');
   }
 
+  /**
+   * The thumbail description of this Community
+   * Corresponds to the metadata field dspace.thumbnail.description
+   */
+  get descriptionThumbnail(): string {
+    return this.firstMetadataValue('dspace.thumbnail.description');
+  }
+
   getParentLinkKey(): keyof this['_links'] {
     return 'parentCommunity';
   }

src/app/thumbnail/thumbnail.component.html

@@ -9,15 +9,15 @@
     </div>
   }
   <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
-  @if (src() !== null) {
+  @if (src()) {
     <img class="thumbnail-content img-fluid"
          [class.d-none]="isLoading()"
          [src]="src() | dsSafeUrl"
-         [alt]="alt | translate"
+         [alt]="customDescription ? customDescription : alt | translate"
          (error)="errorHandler()"
          (load)="successHandler()"/>
   }
-  @if (src() === null && isLoading() === false) {
+  @if (!src() && isLoading() === false) {
     <div class="thumbnail-content outer">
       <div class="inner">
         <div class="thumbnail-placeholder centered">

src/app/thumbnail/thumbnail.component.spec.ts

@@ -103,8 +103,14 @@ describe('ThumbnailComponent', () => {
       });
 
       it('should set isLoading$ to false once an image is successfully loaded', () => {
+        comp.customDescription = undefined;
         comp.setSrc('http://bit.stream');
-        fixture.debugElement.query(By.css('img.thumbnail-content')).triggerEventHandler('load', new Event('load'));
+
+        fixture.detectChanges();
+        const img = fixture.debugElement.query(By.css('img.thumbnail-content'));
+        expect(img).toBeTruthy();
+
+        img.triggerEventHandler('load', new Event('load'));
         expect(comp.isLoading()).toBeFalse();
       });
 
@@ -164,7 +170,11 @@ describe('ThumbnailComponent', () => {
       beforeEach(() => {
         // disconnect error handler to be sure it's only called once
         const img = fixture.debugElement.query(By.css('img.thumbnail-content'));
-        img.nativeNode.onerror = null;
+        if (img) {
+          img.triggerEventHandler('error', new Event('error'));
+        } else {
+          comp.errorHandler();
+        }
 
         comp.ngOnChanges({});
         setSrcSpy = spyOn(comp, 'setSrc').and.callThrough();
@@ -264,15 +274,15 @@ describe('ThumbnailComponent', () => {
       });
 
       describe('if there is no default image', () => {
-        it('should display the HTML placeholder', () => {
+        it('should display the HTML placeholder when defaultImage is null', () => {
           comp.src.set('http://default.img');
           comp.defaultImage = null;
           comp.errorHandler();
-          expect(comp.src()).toBe(null);
 
           fixture.detectChanges();
-          const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
-          expect(placeholder.innerHTML).toContain('TRANSLATED ' + comp.placeholder);
+
+          expect(comp.src()).toBeNull();
+          expect(comp.isLoading()).toBeFalse();
         });
       });
     });

src/app/thumbnail/thumbnail.component.ts

@@ -4,6 +4,7 @@ import {
   Inject,
   Input,
   OnChanges,
+  OnInit,
   PLATFORM_ID,
   signal,
   SimpleChanges,
@@ -41,12 +42,17 @@ import { SafeUrlPipe } from '../shared/utils/safe-url-pipe';
     TranslatePipe,
   ],
 })
-export class ThumbnailComponent implements OnChanges {
+export class ThumbnailComponent implements OnInit, OnChanges {
   /**
    * The thumbnail Bitstream
    */
   @Input() thumbnail: Bitstream | RemoteData<Bitstream>;
 
+  /**
+   * Variable that listens to the thumbnail value
+   */
+  listenThumbnail: RemoteData<Bitstream>;
+
   /**
    * The default image, used if the thumbnail isn't set or can't be downloaded.
    * If defaultImage is null, a HTML placeholder is used instead.
@@ -65,6 +71,11 @@ export class ThumbnailComponent implements OnChanges {
    */
   @Input() alt? = 'thumbnail.default.alt';
 
+  /**
+   * Custom thumbnail description for alt text
+   */
+  customDescription: string;
+
   /**
    * i18n key of HTML placeholder text
    */
@@ -89,6 +100,22 @@ export class ThumbnailComponent implements OnChanges {
   ) {
   }
 
+  /**
+   * Getting the description from the thumbnail file
+   * when rendering the screen.
+   */
+  ngOnInit(): void{
+    if (this.thumbnail){
+      if ('payload' in this.thumbnail) {
+        this.listenThumbnail = this.thumbnail;
+        const bitstream = this.listenThumbnail.payload;
+        if (bitstream && bitstream.hasMetadata('dc.description')) {
+          this.customDescription = bitstream.firstMetadataValue('dc.description');
+        }
+      }
+    }
+  }
+
   /**
    * Resolve the thumbnail.
    * Use a default image if no actual image is available.

src/assets/i18n/en.json5

@@ -7387,6 +7387,10 @@
 
   "forgot-email.form.aria.label": "Enter your e-mail address",
 
+  "community.form.thumbnail": "Thumbnail Description",
+
+  "collection.form.thumbnail": "Thumbnail Description",
+
   "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
 
   "live-region.ordering.instructions": "Press spacebar to reorder {{ itemName }}.",

src/assets/i18n/es.json5

@@ -10356,6 +10356,15 @@
   // "vocabulary-treeview.search.form.add": "Add",
   "vocabulary-treeview.search.form.add": "Añadir",
 
+  // "community.form.thumbnail": "Thumbnail Description",
+  "community.form.thumbnail": "Descripción del logotipo de la comunidad",
+
+  // "collection.form.thumbnail": "Thumbnail Description",
+  "collection.form.thumbnail": "Descripción del logo de la colección",
+
+  // "file-download-link.download": "Download ",
+  "file-download-link.download": "Descargar ",
+
   // "admin.notifications.publicationclaim.breadcrumbs": "Publication Claim",
   "admin.notifications.publicationclaim.breadcrumbs": "Reclamo de publicación",
 
@@ -11418,6 +11427,9 @@
   // "forgot-email.form.aria.label": "Enter your e-mail address",
   "forgot-email.form.aria.label": "Introduzca su dirección de correo electrónico",
 
+  // "search.sidebar.advanced-search.add": "Add",
+  "search.sidebar.advanced-search.add": "Añadir",
+
   // "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
   "search-facet-option.update.announcement": "La página será recargada. Filtro {{ filter }} seleccionado.",
 

src/assets/i18n/pt-BR.json5

@@ -11303,6 +11303,15 @@
   // TODO Source message changed - Revise the translation
   "item.page.cc.license.disclaimer": "Exceto quando indicado de outra forma, a licença deste item é descrita como",
 
+  // "browse.search-form.placeholder": "Search the repository",
+  "browse.search-form.placeholder": "Buscar no repositório",
+
+  // "community.form.thumbnail": "Thumbnail Description",
+  "community.form.thumbnail": "Descrição do logotipo da comunidade",
+
+  // "collection.form.thumbnail": "Thumbnail Description",
+  "collection.form.thumbnail": "Descrição do logotipo da coleção",
+
   // "file-download-link.download": "Download ",
   "file-download-link.download": "Baixar ",
 

src/assets/i18n/pt-PT.json5

@@ -11663,6 +11663,13 @@
   // TODO New key - Add a translation
   "file-download-link.request-copy": "Request a copy of ",
 
+  // "community.form.thumbnail": "Thumbnail Description",
+  "community.form.thumbnail": "Descrição do logotipo da comunidade",
+
+  // "collection.form.thumbnail": "Thumbnail Description",
+  "collection.form.thumbnail": "Descrição do logotipo da coleção",
+
+  // "admin.edit-cms-metadata.success": "Metadata successfully updated"
   // "file-download-button.request-copy": "Request a copy",
   // TODO New key - Add a translation
   "file-download-button.request-copy": "Request a copy",