79597: Add alt text to ds-thumbnail

src/app/thumbnail/thumbnail.component.html

@@ -1,4 +1,4 @@
 <div class="thumbnail">
-  <img [src]="src | dsSafeUrl" (error)="errorHandler()" class="img-fluid"/>
+  <img [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/>
 </div>
 

src/app/thumbnail/thumbnail.component.scss

@@ -1,3 +1,31 @@
 img {
   max-width: 100%;
 }
+
+.outer {  // .outer/.inner generated ~ https://ratiobuddy.com/
+  position: relative;
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: (210 / 297) * 100%;  // A4 ratio
+  }
+  > .inner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    > .thumbnail-placeholder {
+      background: var(--bs-gray-100);
+      border: var(--bs-gray-200) 1px;
+      color: var(--bs-gray-600);
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}

src/app/thumbnail/thumbnail.component.ts

@@ -18,7 +18,6 @@ export const THUMBNAIL_PLACEHOLDER = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20
   templateUrl: './thumbnail.component.html'
 })
 export class ThumbnailComponent implements OnInit {
-
   /**
    * The thumbnail Bitstream
    */
@@ -34,6 +33,11 @@ export class ThumbnailComponent implements OnInit {
    */
   src: string;
 
+  /**
+   * i18n key of thumbnail alt text
+   */
+  @Input() alt? = 'thumbnail.default.alt';
+
   /**
    * Initialize the thumbnail.
    * Use a default image if no actual image is available.

src/assets/i18n/en.json5

@@ -3539,6 +3539,10 @@
   "submission.workflow.tasks.pool.show-detail": "Show detail",
 
 
+  "thumbnail.default.alt": "Thumbnail Image",
+
+  "thumbnail.default.placeholder": "No Thumbnail Available",
+
 
   "title": "DSpace",