From 6b873c926e9dfaed99824377989380b3d73fbd26 Mon Sep 17 00:00:00 2001 From: Hammat Wele Date: Thu, 6 Apr 2023 23:38:22 +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: David Nind https://bugs.koha-community.org/show_bug.cgi?id=32624 --- koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt | 9 +++++++++ 1 file changed, 9 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..1f9eb3f2fa 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,15 @@ $(coverSlide).remove(); } else { $(coverSlide).addClass("cover-slides"); + $(coverSlide).find("img").one("load", function(index) { + if(this.complete && this.naturalHeight !== 0){ + $(coverSlide).css({"background-image":"none"}); + } + }).each(function() { + if(this.complete) { + $(this).trigger('load'); + } + }); } }); -- 2.30.2