Hide empty cover links (#5083)

Author: ThoWagen

module/VuFind/tests/integration-tests/src/VuFindTest/Mink/RecordCoverImageTest.php

@@ -183,6 +183,19 @@ public function testCoverLoading(
         }
 
         // Confirm the expected status of the image (most importantly, should it be visible or hidden?):
+        $coverContainer = $this->findCss($page, '.record-cover-container');
+        if ($noCoverAvailableImage) {
+            $this->assertStringNotContainsString(
+                'hidden',
+                $coverContainer?->getAttribute('class') ?? ''
+            );
+        } else {
+            $this->assertStringContainsString(
+                'hidden',
+                $coverContainer?->getAttribute('class') ?? ''
+            );
+        }
+
         $expectedClasses = 'recordcover'
             . ($ajaxcovers ? ' ajax' : '')
             . (empty($noCoverAvailableImage) ? ' hidden' : '');

themes/bootstrap5/js/covers.js

@@ -100,6 +100,10 @@ VuFind.register('covers', function covers() {
   function checkImgSize(img) {
     if (img.getBoundingClientRect().width < 2) {
       img.classList.add('hidden');
+      let recordCoverContainer = img.closest('.record-cover-container');
+      if (recordCoverContainer !== null) {
+        recordCoverContainer.classList.add('hidden');
+      }
     }
     img.dataset.loaded = 'true';
   }

themes/bootstrap5/templates/RecordDriver/DefaultRecord/cover.phtml

@@ -2,13 +2,13 @@
   // Determine link attributes; use legacy $this->link property as a fallback for backward compatibility.
   $linkAttributes = $this->linkAttributes ?? ($this->link ? ['href' => $this->link] : []);
   if ($linkAttributes && !isset($linkAttributes['class'])) {
-    $linkAttributes['class'] = 'record-cover-link';
+    $linkAttributes['class'] = 'record-cover-container record-cover-link';
   }
 ?>
 <?php if ($linkAttributes): ?>
   <a<?=$this->htmlAttributes($linkAttributes)?>>
 <?php else: ?>
-  <div aria-hidden="true">
+  <div class="record-cover-container" aria-hidden="true">
 <?php endif; ?>
 <?php /* Display thumbnail if appropriate: */ ?>
 <?php if ($cover): ?>

themes/bootstrap5/templates/RecordDriver/EDS/cover.phtml

@@ -3,9 +3,9 @@
   $includeLinkInMarkup = $this->link && $cover !== false;
 ?>
 <?php if ($includeLinkInMarkup): ?>
-  <a href="<?=$this->escapeHtmlAttr($this->link)?>" class="record-cover-link">
+  <a href="<?=$this->escapeHtmlAttr($this->link)?>" class="record-cover-container record-cover-link">
 <?php else: ?>
-  <div aria-hidden="true">
+  <div class="record-cover-container" aria-hidden="true">
 <?php endif; ?>
 <?php /* Display thumbnail if appropriate: */ ?>
 <?php if ($cover): ?>