From 7f5809a3db5494f962a20877efb12a0d65c195ee 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 | 275 ++++++++++++------ 4 files changed, 302 insertions(+), 106 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 e24fb0773c..1eabc735d5 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 da3a8c4206..fbf6dc18c0 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -180,10 +180,6 @@ tr { } td { - img { - max-width: none; - } - &.bookcover { background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat; min-width: 120px; @@ -767,17 +763,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%; @@ -794,12 +785,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; } } @@ -3002,6 +3002,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 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 9d9a7bacee..466b6be313 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -6,7 +6,17 @@ [% SET TagsShowEnabled = ( ( Koha.Preference( 'TagsEnabled' ) == 1 ) && TagsShowOnList ) %] [% SET TagsInputEnabled = ( ( Koha.Preference( 'opacuserlogin' ) == 1 ) && ( Koha.Preference( 'TagsEnabled' ) == 1 ) && TagsInputOnList ) %] [% 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 ) %] + [% SET CoverImages = 1 %] +[% END %] +[% SET OPACCustomCoverImages = ( Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') ) %] [% IF firstPage %] [% SET OverDriveEnabled = Koha.Preference('OverDriveLibraryID') && Koha.Preference('OverDriveClientKey') && Koha.Preference('OverDriveClientSecret') %] [% END %] @@ -30,6 +40,7 @@ [% BLOCK cssinclude %][% END %] +[% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %] [% INCLUDE 'bodytag.inc' bodyid='results' bodyclass='scrollto' %] [% INCLUDE 'masthead.inc' %] @@ -330,95 +341,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 ) %] @@ -579,6 +508,7 @@ [% IF OpenLibraryCovers || OpenLibrarySearch %] [% Asset.js("js/openlibrary.js") | $raw %] [% END %] + [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %] [% CoverImagePlugins | $raw %]