From 55affdebced2046e45988e727254bfd662e94842 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 09:28:02 +0200
Subject: [PATCH] 79597: Add alt text to ds-thumbnail

---
 src/app/thumbnail/thumbnail.component.html |  2 +-
 src/app/thumbnail/thumbnail.component.scss | 28 ++++++++++++++++++++++
 src/app/thumbnail/thumbnail.component.ts   |  6 ++++-
 src/assets/i18n/en.json5                   |  4 ++++
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index dbf8f6732c..ec11ba6c0f 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/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>
 
diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index e2718bac06..9feac243db 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/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;
+    }
+  }
+}
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 7e981d5fe6..8d5e780f27 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/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.
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4c3317a0c0..ac37eba016 100644
--- a/src/assets/i18n/en.json5
+++ b/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",