From 4477b448be7d7b8558349e571564029cc2940e29 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 --- .../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 | 277 ++++++++++++------ 4 files changed, 303 insertions(+), 107 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 a3884592c9..bc1ddfa8f3 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -174,10 +174,6 @@ tr { } td { - img { - max-width: none; - } - &.bookcover { background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat; min-width: 120px; @@ -752,17 +748,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%; @@ -779,12 +770,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; } } @@ -2988,6 +2988,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 38b4b97fe1..a3853f98d2 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 %] @@ -25,9 +35,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,95 +340,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 ) %] @@ -578,6 +507,7 @@ [% IF OpenLibraryCovers || OpenLibrarySearch %] [% Asset.js("js/openlibrary.js") | $raw %] [% END %] + [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %] [% CoverImagePlugins | $raw %]