From 350070d88fe6a260814e7272efa3e1884c1d8f06 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 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: joubu --- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 59 ++++- .../bootstrap/en/includes/opac-bottom.inc | 5 - .../opac-tmpl/bootstrap/en/modules/opac-detail.tt | 259 +++++++++++++++------ koha-tmpl/opac-tmpl/bootstrap/js/coce.js | 74 +++--- koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js | 8 +- 5 files changed, 287 insertions(+), 118 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index e960e87aea..3bf049ab0a 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -607,10 +607,11 @@ th { width: 75px; } -#bookcover { +.bookcover { float: left; margin: 0; padding: 0; + text-align: center; .no-image { margin-bottom: 10px; @@ -628,6 +629,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 c103f0ec4c..cb3f95dbdc 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc @@ -271,11 +271,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 6adf406504..f7a6f7c7a3 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt @@ -36,6 +36,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' %] @@ -58,71 +59,64 @@
-
- [% IF ( biblio.title ) %] - [% img_title = biblio.title %] - [% ELSE %] - [% img_title = biblio.biblionumber %] - [% END %] +
- [% IF ( OPACLocalCoverImages ) %] -
- [% END %] - - [% IF ( AdlibrisEnabled && normalized_isbn ) %] - Cover image - [% END %] +
+ [% IF ( OPACLocalCoverImages ) %] + [% IF localimages.count %] + [% FOREACH image IN localimages %] +
+ + Local cover image + +
Local cover image
+
+ [% END %] + [% END %] + [% END %] - [% IF ( OPACAmazonCoverImages ) %] - [% IF ( OPACURLOpenInNewWindow ) %] - - [% ELSE %] - + [% IF ( AdlibrisEnabled && normalized_isbn ) %] +
+ + Adlibris cover image + +
Image from Adlibris
+
[% 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 %] @@ -1020,7 +1014,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 %] @@ -1271,9 +1267,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 %] @@ -1455,6 +1459,8 @@ [% Asset.js("lib/kjua/kjua.min.js") | $raw %] [% END %] + [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %] + [% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]