From d560b2a9aef3a6d1ab0d18bda96cd9b604882b16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michel=20Gabri=C3=ABl?= <michel.gabriel@geocat.net>
Date: Mon, 9 Sep 2024 08:21:35 +0200
Subject: [PATCH] Put the image name in the `alt` attribute in the thumbnail on
 the metadata page. (#8290)

This commit adds the `<img>` in the `alt` attribute when there is a name, otherwise a default string is used.

The image name used to be the caption underneath the thumbnail, but is now removed

Extra: the `max-height` is increased in order to have the full width of the image.
---
 .../views/default/less/gn_result_default.less       |  2 +-
 .../default/templates/recordView/thumbnails.html    | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_result_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_result_default.less
index 4e26b7506c4..09867678db0 100644
--- a/web-ui/src/main/resources/catalog/views/default/less/gn_result_default.less
+++ b/web-ui/src/main/resources/catalog/views/default/less/gn_result_default.less
@@ -147,7 +147,7 @@
     .img-thumbnail {
       padding: 0;
       border: none;
-      max-height: 300px;
+      max-height: 500px;
       min-height: 150px;
       max-width: 100%;
     }
diff --git a/web-ui/src/main/resources/catalog/views/default/templates/recordView/thumbnails.html b/web-ui/src/main/resources/catalog/views/default/templates/recordView/thumbnails.html
index 87fab96123f..6338bf0f4d5 100644
--- a/web-ui/src/main/resources/catalog/views/default/templates/recordView/thumbnails.html
+++ b/web-ui/src/main/resources/catalog/views/default/templates/recordView/thumbnails.html
@@ -1,13 +1,22 @@
 <ul class="gn-thumbnails" data-ng-if="mdView.current.record.overview.length > 0">
   <li data-ng-repeat="img in mdView.current.record.overview">
     <img
+      data-ng-if="img.name"
       data-gn-img-modal="img"
       class="img-thumbnail"
-      alt="{{'overview' | translate}}"
+      alt="{{img.name}}"
       title="{{img.name}}"
       data-ng-src="{{mdView.current.record.draft === 'y'? img.url + (img.url.indexOf('?') > 0 ? '&' : '?') + 'approved=false' : img.url}}"
       onerror="this.onerror=null; this.parentElement.style.display='none';"
     />
-    <p class="text-center" data-ng-if="img.name != ''">{{img.name}}</p>
+    <img
+      data-ng-if="!img.name"
+      data-gn-img-modal="img"
+      class="img-thumbnail"
+      alt="{{'overview' | translate}}"
+      title="{{'overview' | translate}}"
+      data-ng-src="{{mdView.current.record.draft === 'y'? img.url + (img.url.indexOf('?') > 0 ? '&' : '?') + 'approved=false' : img.url}}"
+      onerror="this.onerror=null; this.parentElement.style.display='none';"
+    />
   </li>
 </ul>