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 @@
-
![]()
+
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",