From 1d86c2129bf9b899a1459280cefb4ec10d45c5c2 Mon Sep 17 00:00:00 2001 From: Hammat Wele Date: Fri, 24 Mar 2023 12:55:15 +0000 Subject: [PATCH] Bug 32642: Loading spinner always visible when cover image is short (OPAC) We noticed that if the cover image is somewhat short (i.e. the height is under 80-90 px), the loading spinner indicating that the image is currently loading still appears after the image is loaded. this patch remove the spinner when the image is loaded,. To test: 1. Make sure the OPACLocalCoverImages system preference is enabled 1.1. Go to Administration > Global system preferences 1.2. Search for Coverimages 1.3. Set OPACLocalCoverImages to 'Show' 1.4. Click 'Save all Enhanced content preferences' 2. Add a short local cover image to a record (I added one which is just a grey rectangle with the size printed on it, to facilitate the test) 2.1. Download the attached image 2.2. Find a record without an image 2.3. Click the 'Images' tab 2.4. Click 'Upload' 2.5. Click 'Drop files here or click to select a file' and choose the downloaded image 2.6. Click 'Process images' 3. View the record in the OPAC 3.1. From the image upload page, click on the title of the record in the page heading to access the detailed record in the staff interface 3.2. Click on 'OPAC view: Open in new window.' --> Note that the image is displayed normally, but the spinner is also displayed 4. Apply the patch 5. View the record in the OPAC --> Note that the spinner is no more displayed Signed-off-by: Laura Escamilla --- koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt index ab2f28e615..b2d6230b4e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt @@ -1607,6 +1607,10 @@ $(coverSlide).remove(); } else { $(coverSlide).addClass("cover-slides"); + var img = $(coverSlide).find(".cover-image:visible").find("img")[0]; + if( $(img).length > 0 && img.complete && img.naturalHeight > 0 ){ + $(coverSlide).css({"background-image":"none"}); + } } }); -- 2.30.2