From 20176954830f3e7d96bd792c6d716ed1ba3bfb74 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 --- .../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 3f9547175d..5baf19b827 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; @@ -737,17 +733,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%; @@ -764,12 +755,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; } } @@ -2906,6 +2906,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 d0df28143b..b3eb186052 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 %]