[BP] Hide thumbnail image in metadata page when the image can't be lo…

…aded due to an error. (geonetwork#7319) * Hide thumbnail image in metadata page when the image can't be loaded due to an error. - Hide description related to the image. - Hide the Overview header in the full view if there is only 1 thumbnail and can't be loaded
SPW-DIG · Sep 7, 2023 · a0cbe44 · a0cbe44
1 parent cffac20
commit a0cbe44
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 26 deletions.
diff --git a/schemas/dublin-core/src/main/plugin/dublin-core/formatter/xsl-view/view.xsl b/schemas/dublin-core/src/main/plugin/dublin-core/formatter/xsl-view/view.xsl
@@ -88,11 +88,18 @@
                     select="(dct:references|dc:relation)[
                               normalize-space(.) != ''
                               and matches(., '.*(.gif|.png|.jpeg|.jpg)$', 'i')]"/>
+
+      <xsl:variable name="imgOnError" as="xs:string?"
+                    select="if (count($overviews) > 1)
+                            then 'this.onerror=null; this.style.display=''none'';'
+                            else 'this.onerror=null; $(''.gn-md-side-overview'').hide();'"/>
+
       <xsl:for-each select="$overviews">
         <img data-gn-img-modal="md"
              class="gn-img-thumbnail"
              alt="{$schemaStrings/overview}"
-             src="{.}"/>
+             src="{.}"
+             onerror="{$imgOnError}"/>
       </xsl:for-each>
     </section>
   </xsl:template>

diff --git a/schemas/iso19115-3.2018/src/main/plugin/iso19115-3.2018/formatter/xsl-view/view.xsl b/schemas/iso19115-3.2018/src/main/plugin/iso19115-3.2018/formatter/xsl-view/view.xsl
@@ -249,19 +249,27 @@
           </span>
         </h2>
 
-        <xsl:for-each select="mdb:identificationInfo/*/mri:graphicOverview/*">
-          <img data-gn-img-modal="md"
-               class="gn-img-thumbnail center-block"
-               alt="{$schemaStrings/overview}"
-               src="{mcc:fileName/*}"/>
+        <xsl:variable name="imgOnError" as="xs:string?"
+                      select="if (count(mdb:identificationInfo/*/mri:graphicOverview/*) > 1)
+                            then 'this.onerror=null; this.parentElement.style.display=''none'';'
+                            else 'this.onerror=null; $(''.gn-md-side-overview'').hide();'"/>
 
-          <xsl:for-each select="mcc:fileDescription">
-            <div class="gn-img-thumbnail-caption">
-              <xsl:call-template name="get-iso19115-3.2018-localised">
-                <xsl:with-param name="langId" select="$langId"/>
-              </xsl:call-template>
-            </div>
-          </xsl:for-each>
+        <xsl:for-each select="mdb:identificationInfo/*/mri:graphicOverview/*">
+          <div>
+            <img data-gn-img-modal="md"
+                 class="gn-img-thumbnail center-block"
+                 alt="{$schemaStrings/overview}"
+                 src="{mcc:fileName/*}"
+                 onerror="{$imgOnError}"/>
+
+            <xsl:for-each select="mcc:fileDescription">
+              <div class="gn-img-thumbnail-caption">
+                <xsl:call-template name="get-iso19115-3.2018-localised">
+                  <xsl:with-param name="langId" select="$langId"/>
+                </xsl:call-template>
+              </div>
+            </xsl:for-each>
+          </div>
         </xsl:for-each>
       </section>
     </xsl:if>

diff --git a/schemas/iso19139/src/main/plugin/iso19139/formatter/xsl-view/view.xsl b/schemas/iso19139/src/main/plugin/iso19139/formatter/xsl-view/view.xsl
@@ -223,20 +223,27 @@
         </span>
       </h2>
 
-      <xsl:for-each select="gmd:identificationInfo/*/gmd:graphicOverview/*">
-        <img data-gn-img-modal="md"
-             class="gn-img-thumbnail"
-             alt="{$schemaStrings/overview}"
-             src="{gmd:fileName/*}"/>
-
-        <xsl:for-each select="gmd:fileDescription">
-          <div class="gn-img-thumbnail-caption">
-            <xsl:call-template name="localised">
-              <xsl:with-param name="langId" select="$langId"/>
-            </xsl:call-template>
-          </div>
-        </xsl:for-each>
+      <xsl:variable name="imgOnError" as="xs:string?"
+                    select="if (count(gmd:identificationInfo/*/gmd:graphicOverview/*) > 1)
+                            then 'this.onerror=null; this.parentElement.style.display=''none'';'
+                            else 'this.onerror=null; $(''.gn-md-side-overview'').hide();'"/>
 
+      <xsl:for-each select="gmd:identificationInfo/*/gmd:graphicOverview/*">
+        <div>
+          <img data-gn-img-modal="md"
+               class="gn-img-thumbnail"
+               alt="{$schemaStrings/overview}"
+               src="{gmd:fileName/*}"
+               onerror="{$imgOnError}" />
+
+          <xsl:for-each select="gmd:fileDescription">
+            <div class="gn-img-thumbnail-caption">
+              <xsl:call-template name="localised">
+                <xsl:with-param name="langId" select="$langId"/>
+              </xsl:call-template>
+            </div>
+          </xsl:for-each>
+        </div>
       </xsl:for-each>
     </section>
   </xsl:template>

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
@@ -6,6 +6,7 @@
       alt="{{'overview' | translate}}"
       title="{{img.name}}"
       data-ng-src="{{img.url}}"
+      onerror="this.onerror=null; this.parentElement.style.display='none';"
     />
     <p class="text-center" data-ng-if="img.name != ''">{{img.name}}</p>
   </li>