From f4cf34faed141533e48e2598c4e21228fcabb94f Mon Sep 17 00:00:00 2001 From: Hammat Wele Date: Fri, 24 Mar 2023 12:35:04 +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 --- koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt | 5 +++++ 1 file changed, 5 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..028ba705c0 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt @@ -1,3 +1,4 @@ + [% USE raw %] [% USE Asset %] [% USE Math %] @@ -1607,6 +1608,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.34.1