From fad97080e97da5bc77724c68b9394aba15518847 Mon Sep 17 00:00:00 2001 From: Jonathan Druart Date: Tue, 20 Apr 2021 09:26:43 +0200 Subject: [PATCH] Bug 28180: Add a lightbox gallery to display cover images - detail page, OPAC interface MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit This patch is the OPAC version of Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface But there were several difficulties as the staff and OPAC code diverged a lot. First we are going to apply the different enhancements that have been made staff-side: - Display all the local cover image on the bibliographic detail pages (before this patch only the first one was displayed) - The slider functionality added by bug 25031 Test plan: All the cover images are affected, all the different sources will be tested. All the steps will be done on the same bibliographic record. 1. Local cover images a. Turn on OPACLocalCoverImages and AllowMultipleCover b. Add several local cover images to a bibliographic record c. Add several local cover images to an item d. Click on an image and confirm that it is displayed in a gallery and you can navigate see all the images attached to the bibliographic record e. Same for items 2. Adlibris a. Turn on AdlibrisCoversEnabled b. Edit the biliographic record and add an ISBN that will return a cover image for this service (9780670026623 for instance) c. Display the cover images in the gallery d. Note the link to the adlibris.com website at the bottom 3. Amazon a. Turn on OPACAmazonCoverImages b. Display the cover images in the gallery 4. Coce a. Turn on OpacCoce, set CoceHost to "http://coce.tamil.fr:8080" and select some values for CoceProviders. b. Display the cover images in the gallery 5. Custom cover images a. Turn on OPACCustomCoverImages and set CustomCoverImagesURL to https://covers.openlibrary.org/b/isbn/{isbn}-M.jpg of anything else meaningful b. Display the cover images in the gallery QA Note: Other sources have been removed by this patch but will be re-added by follow-ups Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Rasmus Leißner Signed-off-by: Katrin Fischer Signed-off-by: Jonathan Druart --- .../opac-tmpl/bootstrap/css/src/opac.scss | 59 ++++- .../bootstrap/en/includes/opac-bottom.inc | 5 - .../bootstrap/en/modules/opac-detail.tt | 248 +++++++++++++----- koha-tmpl/opac-tmpl/bootstrap/js/coce.js | 74 +++--- .../opac-tmpl/bootstrap/js/localcovers.js | 8 +- 5 files changed, 279 insertions(+), 115 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 746674515b..24c9c4f7dc 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -617,10 +617,11 @@ th { width: 75px; } -#bookcover { +.bookcover { float: left; margin: 0; padding: 0; + text-align: center; .no-image { margin-bottom: 10px; @@ -638,6 +639,62 @@ th { } } +#biblio-cover-slider { + border: 1px solid #b9d8d9; + border-radius: 3px; + margin: 5px; + padding: 10px 5px 5px 5px; + min-height: 175px; +} + +.cover-slides { + background: #FFF url("../img/spinner-small.gif") center center no-repeat; + + .hint { + font-size: 90%; + padding: .5em 0; + } + + a { + &.nav-active { + &:link, + &:visited { + color: #85ca11; + } + } + } +} + +td { + &.bookcover { + background: #FFF url("../img/spinner-small.gif") center center no-repeat; + min-width: 120px; + text-align: center; + } + + .cover-slides { + background: transparent none; + border: 0; + margin: 0; + min-height: unset; + padding: 0; + } +} + +.cover-image { + display: none; + + img { + height: auto; + max-width: 100%; + } +} + +.cover-nav { + display: inline-block; + padding: 3px 4px; +} + div { &.required_label { display: none; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc index e4aaccf54a..2a3a33175f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc @@ -262,11 +262,6 @@ $.widget.bridge('uitooltip', $.ui.tooltip); [% IF OPACLocalCoverImages %] [% Asset.js("js/localcovers.js") | $raw %] - [% END %] [% IF ( BakerTaylorEnabled ) %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt index 05266aa1ae..70dc307b88 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt @@ -34,6 +34,7 @@ [% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %] [% Asset.css("lib/verovio/midiplayer.css") | $raw %] [% END %] + [% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %] [% BLOCK cssinclude %][% END %] [% INCLUDE 'bodytag.inc' bodyid='opac-detail' bodyclass='scrollto' %] @@ -56,67 +57,55 @@
-
- [% IF ( biblio.title ) %] - [% img_title = biblio.title %] - [% ELSE %] - [% img_title = biblio.biblionumber %] - [% END %] +
- [% IF ( OPACLocalCoverImages ) %] -
- [% END %] - - [% IF ( OPACAmazonCoverImages ) %] - [% IF ( OPACURLOpenInNewWindow ) %] - - [% ELSE %] - +
+ [% IF ( OPACLocalCoverImages ) %] + [% IF localimages.count %] + [% FOREACH image IN localimages %] +
+ + Local cover image + +
Local cover image
+
+ [% END %] + [% END %] [% END %] - Cover image - [% END %] - [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %] - [% IF ( content_identifier_exists ) %] - - [% ELSE %] - No cover image available + [% IF ( OPACAmazonCoverImages && normalized_isbn) %] +
+ + Amazon cover image + +
Image from Amazon.com
+
[% END %] - [% END %] - [% IF ( GoogleJackets ) %] -
- [% END %] - [% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %] - [% coce_id = normalized_ean || normalized_isbn | html %] -
- [% END %] - [% IF OpenLibraryCovers %] -
- [% END %] - [% bt_id = ( normalized_upc || normalized_isbn ) %] - [% IF ( BakerTaylorEnabled && bt_id ) %] - [% IF BakerTaylorBookstoreURL %] - [% IF ( OPACURLOpenInNewWindow ) %] - See Baker & Taylor - [% ELSE %] - See Baker & Taylor - [% END %] - [% ELSE %] - See Baker & Taylor + [% IF ( Koha.Preference('OPACCoce') && Koha.Preference('CoceProviders') && normalized_isbn ) %] + [% coce_id = normalized_ean || normalized_isbn %] +
+ [% IF ( coce_id ) %] + + [% END %] +
Image from Coce
+
[% END %] - [% END %] - [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %] - [% SET custom_cover_image_url = biblio.custom_cover_image_url %] - [% IF custom_cover_image_url %] - [% IF ( OPACURLOpenInNewWindow ) %] - Cover image - [% ELSE %] - Cover image + + [% IF Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %] + [% SET custom_cover_image_url = biblio.custom_cover_image_url %] + [% IF custom_cover_image_url %] +
+ + Custom cover image + +
Custom cover image
+
[% END %] [% END %] - [% END %] -
+
+ +
[% IF ( ocoins ) # COinS / Openurl %] @@ -868,7 +857,9 @@

Click on an image to view it in the image viewer

[% FOREACH image IN localimages %] - + + Local cover image + [% END %]
[% END # / IF OPACLocalCoverImages && localimages.size %] @@ -1116,9 +1107,17 @@ [% IF Koha.Preference('OPACLocalCoverImages') && ( tab == 'holdings' && itemloop_has_images || tab == 'otherholdings' && otheritemloop_has_images ) %] - [% FOR image IN ITEM_RESULT.cover_images %] -
- [% END %] +
+
+ [% FOR image IN ITEM_RESULT.cover_images %] +
+ + Local cover image + +
+ [% END %] +
+
[% END %] @@ -1300,6 +1299,8 @@ [% Asset.js("lib/kjua/kjua.min.js") | $raw %] [% END %] + [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %] + [% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]