From a6c85442bc53bbead65900bdbb447f2e006b142c 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 OPAC search results, matching the way we show covers on the detail page. To test, apply the page and rebuild the OPAC 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 - 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. Sponsored-by: Athens County Public Libraries Signed-off-by: David Nind Signed-off-by: Laura Escamilla Signed-off-by: Katrin Fischer --- .../bootstrap/css/src/_responsive.scss | 10 +- .../opac-tmpl/bootstrap/css/src/opac.scss | 37 ++- .../bootstrap/en/includes/cover-images.inc | 86 ++++++ .../bootstrap/en/modules/opac-results.tt | 280 ++++++++++++------ 4 files changed, 305 insertions(+), 108 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/bootstrap/en/includes/cover-images.inc diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 2d1f0fb2f6..2d67ea96a9 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -301,6 +301,12 @@ border: 0; box-shadow: none; } + + .cover-image { + img { + margin: .7rem; + } + } } @media only screen and ( min-width: 608px ) and ( max-width: 767px ) { @@ -310,10 +316,6 @@ margin: 10px 0; } - .row-fluid input.span6 { - width: 48.9362%; - } - #wrapper { padding: 0 15px; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index c49c44175c..e3e16efa7b 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -156,10 +156,6 @@ tr { } td { - img { - max-width: none; - } - &.bookcover { background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat; min-width: 120px; @@ -740,17 +736,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%; @@ -767,12 +758,21 @@ th { } } +.covercol { + .cover-slider { + background: transparent none; + margin: 0; + padding: 5px; + } +} + .cover-image { display: none; img { - height: auto; + margin: .2rem; max-width: 100%; + width: auto; } } @@ -2909,6 +2909,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 ) + } + } } #patronconsents h2 { 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 0000000000..dbff05a37a --- /dev/null +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/cover-images.inc @@ -0,0 +1,86 @@ +[% USE raw %] +
+
+ [% IF ( OPACLocalCoverImages && SEARCH_RESULT.has_local_cover_image ) %] +
+ + + +
Local cover image
+
+ [% END %] + + [% IF ( OPACAmazonCoverImages && SEARCH_RESULT.normalized_isbn) %] +
+ + Amazon cover image + +
Image from Amazon.com
+
+ [% END %] + + [% IF ( SyndeticsCoverImages ) %] + [% IF ( content_identifier_exists ) %] +
+ + Syndetics cover image + +
Image from Syndetics
+
+ [% END %] + [% END %] + + [% IF ( GoogleJackets ) %] +
+
+
Image from Google Jackets
+
+ [% END %] + + [% IF ( OPACCoce && 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 OPACCustomCoverImages %] + [% 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 0f567b376c..a8179b0e7a 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -14,9 +14,20 @@ [% SET RecallsEnabled = ( Koha.Preference('UseRecalls') == 1 ) && LoginEnabled %] [% SET ArticleRequestsEnabled = ( Koha.Preference('ArticleRequests') == 1 ) && LoginEnabled %] [% SET MultiHolds = ( Koha.Preference('DisplayMultiPlaceHold') == 1 ) && HoldsEnabled %] - -[% IF firstPage %] - [% SET OverDriveEnabled = Koha.Preference('OverDriveLibraryID') && Koha.Preference('OverDriveClientKey') && Koha.Preference('OverDriveClientSecret') %] +[% SET CoverImagePlugins = KohaPlugins.get_plugins_opac_cover_images %] +[% SET OPACLocalCoverImages = Koha.Preference('OPACLocalCoverImages') %] +[% SET OPACAmazonCoverImages = Koha.Preference('OPACAmazonCoverImages') %] +[% SET SyndeticsCoverImages = ( Koha.Preference('SyndeticsEnabled') && Koha.Preference('SyndeticsCoverImages') ) %] +[% SET GoogleJackets = Koha.Preference('GoogleJackets') %] +[% SET OpenLibraryCovers = Koha.Preference('OpenLibraryCovers') %] +[% SET BakerTaylorEnabled = Koha.Preference('BakerTaylorEnabled') %] +[% SET OPACCoce = ( Koha.Preference('OPACCoce') && Koha.Preference('CoceProviders') ) %] +[% IF ( CoverImagePlugins || OPACLocalCoverImages || OPACAmazonCoverImages || SyndeticsCoverImages || GoogleJackets || OpenLibraryCovers || BakerTaylorEnabled || OPACCoce || OPACCustomCoverImages ) %] + [% IF firstPage %] + [% SET CoverImages = 1 %] + [% END %] + [% SET OPACCustomCoverImages = ( Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') ) %] + [% SET OverDriveEnabled = Koha.Preference('OverDriveLibraryID') && Koha.Preference('OverDriveClientKey') && Koha.Preference('OverDriveClientSecret') %] [% END %] [% INCLUDE 'doc-head-open.inc' %] @@ -38,6 +49,7 @@ [% BLOCK cssinclude %][% END %] +[% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %] [% INCLUDE 'bodytag.inc' bodyid='results' bodyclass='scrollto' %] [% INCLUDE 'masthead.inc' %] @@ -251,95 +263,13 @@ [% END %] [% END %] - + [% IF ( CoverImages) %] + + [% INCLUDE 'cover-images.inc' %] + + [% END %] [% # Cell 4: Search result details and controls %] - [% IF ( SEARCH_RESULT.title ) %] - [% img_title = SEARCH_RESULT.title %] - [% ELSE %] - [% img_title = SEARCH_RESULT.biblionumber %] - [% END %] -
- - - [% IF ( OPACLocalCoverImages && SEARCH_RESULT.has_local_cover_image ) %] - - [% 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 ) %] @@ -499,6 +429,7 @@ [% IF OpenLibraryCovers || OpenLibrarySearch %] [% Asset.js("js/openlibrary.js") | $raw %] [% END %] + [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %] [% CoverImagePlugins | $raw %]