From 855d721b0522584964569f0439d3ba8cb05653c1 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 11 Apr 2024 10:25:21 +0000 Subject: [PATCH] Bug 26933: Improve handling of multiple covers on catalog search results in the OPAC This patch implements a book cover slider widget for cover images in search results, matching the way we show covers on the detail page. To test, apply the page and rebuild the staff client CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). Enable multiple cover image services. The patch was developed with these services available: - Amazon - Local cover images (including multiple local cover images) - Coce (serving up Amazon, Google, and OpenLibrary images) - OpenLibrary - Baker & Taylor - Google - Custom cover images (the CustomCoverImages preference) Perform a variet of searches and confirm that cover images are displaying correctly, whether there be 0, 1, 2, or more covers available for each. --- .../opac-tmpl/bootstrap/css/src/opac.scss | 35 ++- .../bootstrap/en/includes/cover-images.inc | 90 ++++++ .../bootstrap/en/modules/opac-results.tt | 257 ++++++++++++------ 3 files changed, 286 insertions(+), 96 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/bootstrap/en/includes/cover-images.inc diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 7d0cc68affa..54be1f092f6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -734,17 +734,12 @@ th { } } -#biblio-cover-slider { - background-color: #FFF; - border: 1px solid #B9D8D9; - border-radius: 3px; - margin: 0 1em .5em 0; - min-height: 175px; - padding: 10px 5px 5px 5px; -} - .cover-slider { background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat; + margin: 0 1em .5em 0; + min-height: 175px; + min-width: 100px; + padding: 10px 15px 5px 5px; .hint { font-size: 80%; @@ -761,13 +756,16 @@ th { } } +.covercol { + .cover-slider { + background: transparent none; + margin: 0; + padding: 5px; + } +} + .cover-image { display: none; - - img { - height: auto; - max-width: 100%; - } } .custom_cover_image { @@ -2957,6 +2955,15 @@ $star-selected: #EDB867; .chocolat-bottom { background: rgba( 0, 0, 0, .7 ); } + + .chocolat-description { + a:link, + a:visited, + a:hover, + a:active { + color: desaturate( lighten( $base-theme-color, 40 ), 30 ) + } + } } @import "responsive"; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/cover-images.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/cover-images.inc new file mode 100644 index 00000000000..e4f3273b0af --- /dev/null +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/cover-images.inc @@ -0,0 +1,90 @@ +
+ +
+ [% IF ( OPACLocalCoverImages ) %] + [% IF localimages.count %] + [% FOREACH image IN localimages %] +
+ + Local cover image + +
Local cover image
+
+ [% END %] + [% END %] + [% END %] + + [% IF ( OPACAmazonCoverImages && SEARCH_RESULT.normalized_isbn) %] +
+ + Amazon cover image + +
Image from Amazon.com
+
+ [% END %] + + [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %] + [% IF ( content_identifier_exists ) %] +
+ + Syndetics cover image + +
Image from Syndetics
+
+ [% END %] + [% END %] + + [% IF ( GoogleJackets ) %] +
+
+
Image from Google Jackets
+
+ [% END %] + + [% IF ( Koha.Preference('OPACCoce') && Koha.Preference('CoceProviders') && SEARCH_RESULT.normalized_isbn ) %] + [% coce_id = normalized_ean || SEARCH_RESULT.normalized_isbn %] +
+ [% IF ( coce_id ) %] + + [% END %] +
Image from Coce
+
+ [% END %] + + [% IF OpenLibraryCovers %] +
+
+
Image from OpenLibrary
+
+ [% END %] + + [% bt_id = ( SEARCH_RESULT.normalized_upc || SEARCH_RESULT.normalized_isbn ) %] + [% IF ( BakerTaylorEnabled && bt_id ) %] +
+ [% IF BakerTaylorBookstoreURL %] + + See Baker & Taylor + + [% ELSE %] + + See Baker & Taylor + + [% END %] +
Image from Baker & Taylor
+
+ [% END %] + + [% IF Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %] + [% SET custom_cover_image_url = SEARCH_RESULT.biblio_object.custom_cover_image_url %] + [% IF custom_cover_image_url %] +
+ + Custom cover image + +
Custom cover image
+
+ [% END %] + [% END %] +
+ +
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt index 5df882aff73..a3efd1e7557 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -25,9 +25,10 @@ › [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog -[% INCLUDE 'doc-head-close.inc' %] +[% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %] +[% INCLUDE 'doc-head-close.inc' %] [% BLOCK cssinclude %][% END %] [% INCLUDE 'bodytag.inc' bodyid='results' bodyclass='scrollto' %] @@ -329,7 +330,9 @@ [% END %] [% END %] - + + [% INCLUDE 'cover-images.inc' %] + [% # Cell 4: Search result details and controls %] [% IF ( SEARCH_RESULT.title ) %] @@ -337,87 +340,7 @@ [% ELSE %] [% img_title = SEARCH_RESULT.biblionumber %] [% END %] -
- - - [% IF ( OPACLocalCoverImages ) %] - - [% END %] - [% IF ( OPACAmazonCoverImages ) %] - [% IF ( SEARCH_RESULT.normalized_isbn ) %] - - [% ELSE %] - No cover image available - [% END %] - [% END %] - - [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %] - [% IF ( SEARCH_RESULT.normalized_isbn || SEARCH_RESULT.normalized_upc || SEARCH_RESULT.normalized_oclc ) %] - - [% ELSE %] - No cover image available - [% END %] - [% END %] - - [% IF ( GoogleJackets ) %] - [% IF ( SEARCH_RESULT.normalized_isbn ) %] - - [% ELSE %] - No cover image available - [% END %] - [% END %] - - [% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %] - [% coce_id = SEARCH_RESULT.normalized_ean || SEARCH_RESULT.normalized_isbn | html %] - [% IF ( coce_id ) %] - - [% ELSE %] - No cover image available - [% END %] - [% END %] - - [% IF OpenLibraryCovers %] - [% IF SEARCH_RESULT.normalized_isbn %] - - [% ELSE %] - No cover image available - [% END %] - [% END %] - - [% IF ( BakerTaylorEnabled && !BakerTaylorBookstoreURL ) %] - [% bt_id = ( SEARCH_RESULT.normalized_upc || SEARCH_RESULT.normalized_isbn ) %] - [% IF ( bt_id ) %] - See Baker & Taylor - [% ELSE %] - No cover image available - [% END %] - [% END %] - - - [% IF ( BakerTaylorEnabled && BakerTaylorBookstoreURL ) %] - [% bt_id = ( SEARCH_RESULT.normalized_upc || SEARCH_RESULT.normalized_isbn ) %] - [% IF ( bt_id ) %] - - See Baker & Taylor - - [% ELSE %] - No cover image available - [% END %] - [% END %] - - [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %] - [% SET custom_cover_image_url = SEARCH_RESULT.biblio_object.custom_cover_image_url %] - [% IF custom_cover_image_url %] - [% IF ( OPACURLOpenInNewWindow ) %] - Cover image - [% ELSE %] - Cover image - [% END %] - [% END %] - [% END %] - -
[% IF ( COinSinOPACResults && SEARCH_RESULT.coins ) %] @@ -578,6 +501,7 @@ [% IF OpenLibraryCovers || OpenLibrarySearch %] [% Asset.js("js/openlibrary.js") | $raw %] [% END %] + [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %] [% CoverImagePlugins | $raw %]