Bug 28180 - Use a lightbox gallery to display the images - detail page, OPAC interface
Summary: Use a lightbox gallery to display the images - detail page, OPAC interface
Status: Needs Signoff
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Jonathan Druart
QA Contact: Testopia
URL:
Keywords:
Depends on: 28179
Blocks:
  Show dependency treegraph
 
Reported: 2021-04-20 14:10 UTC by Jonathan Druart
Modified: 2021-05-10 18:27 UTC (History)
0 users

See Also:
Change sponsored?: Sponsored
Patch complexity: ---
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 28180: Add Chocolat to OPAC (43.89 KB, patch)
2021-04-20 15:07 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Add a lightbox gallery to display cover images - detail page, OPAC interface (29.00 KB, patch)
2021-04-20 15:07 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Syndetics (2.90 KB, patch)
2021-04-20 15:08 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Google Jackets (5.58 KB, patch)
2021-04-20 15:08 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust OpenLibrary (4.57 KB, patch)
2021-04-20 15:08 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Baker and Taylor (3.08 KB, patch)
2021-04-20 15:08 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Bug fix - cannot select cover-nav button when on top of the .contentblock (1.11 KB, patch)
2021-04-20 15:08 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Add Chocolat to OPAC (43.23 KB, patch)
2021-05-04 12:18 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 28180: Add a lightbox gallery to display cover images - detail page, OPAC interface (29.09 KB, patch)
2021-05-04 12:18 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Syndetics (2.96 KB, patch)
2021-05-04 12:18 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Google Jackets (5.65 KB, patch)
2021-05-04 12:18 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust OpenLibrary (4.64 KB, patch)
2021-05-04 12:18 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Baker and Taylor (3.15 KB, patch)
2021-05-04 12:18 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 28180: Bug fix - cannot select cover-nav button when on top of the .contentblock (1.17 KB, patch)
2021-05-04 12:18 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 28180: Add Chocolat to OPAC (44.05 KB, patch)
2021-05-04 13:39 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Add a lightbox gallery to display cover images - detail page, OPAC interface (29.17 KB, patch)
2021-05-04 13:39 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Syndetics (3.05 KB, patch)
2021-05-04 13:39 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Google Jackets (5.74 KB, patch)
2021-05-04 13:39 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust OpenLibrary (4.73 KB, patch)
2021-05-04 13:40 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Reintroduce and adjust Baker and Taylor (3.24 KB, patch)
2021-05-04 13:40 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Bug fix - cannot select cover-nav button when on top of the .contentblock (1.27 KB, patch)
2021-05-04 13:40 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: (follow-up) Remove console.log (1.12 KB, patch)
2021-05-10 07:16 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: Restore NO_LOCAL_JACKET (989 bytes, patch)
2021-05-10 07:16 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 28180: (follow-up) Updates to styling of lightbox controls (22.88 KB, patch)
2021-05-10 18:27 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Druart 2021-04-20 14:10:15 UTC

    
Comment 1 Jonathan Druart 2021-04-20 15:07:54 UTC
Created attachment 119918 [details] [review]
Bug 28180: Add Chocolat to OPAC

See Bug 28179: Add the Chocolat gallery lightbox JS library

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Comment 2 Jonathan Druart 2021-04-20 15:07:59 UTC
Created attachment 119919 [details] [review]
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)
Comment 3 Jonathan Druart 2021-04-20 15:08:03 UTC
Created attachment 119920 [details] [review]
Bug 28180: Reintroduce and adjust Syndetics

Test plan:
1. Enable SyndeticsEnabled and SyndeticsCoverImages
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Comment 4 Jonathan Druart 2021-04-20 15:08:07 UTC
Created attachment 119921 [details] [review]
Bug 28180: Reintroduce and adjust Google Jackets

Test plan:
1. Turn on GoogleJackets
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Comment 5 Jonathan Druart 2021-04-20 15:08:14 UTC
Created attachment 119922 [details] [review]
Bug 28180: Reintroduce and adjust OpenLibrary

1. Turn on OpenLibraryCovers
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Comment 6 Jonathan Druart 2021-04-20 15:08:19 UTC
Created attachment 119923 [details] [review]
Bug 28180: Reintroduce and adjust Baker and Taylor

Test plan:
1. Turn on BakerTaylorEnabled and fill BakerTaylorUsername/BakerTaylorPassword (if you don't have, ask me)
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Comment 7 Jonathan Druart 2021-04-20 15:08:24 UTC
Created attachment 119924 [details] [review]
Bug 28180: Bug fix - cannot select cover-nav button when on top of the .contentblock

Found a bug and ended up with this solution, suggestions welcomed!

example with OpenLibrary with isbn=9780670026623, the image is a bit
higher than others and then the cover-nav buttons are on top of
.contentblock and cannot be clicked

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Comment 8 PTFS Europe Sandboxes 2021-05-04 12:18:14 UTC
Created attachment 120444 [details] [review]
Bug 28180: Add Chocolat to OPAC

See Bug 28179: Add the Chocolat gallery lightbox JS library

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: joubu <jonathan.druart@bugs.koha-community.org>
Comment 9 PTFS Europe Sandboxes 2021-05-04 12:18:19 UTC
Created attachment 120445 [details] [review]
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 <jonathan.druart@bugs.koha-community.org>
Comment 10 PTFS Europe Sandboxes 2021-05-04 12:18:23 UTC
Created attachment 120446 [details] [review]
Bug 28180: Reintroduce and adjust Syndetics

Test plan:
1. Enable SyndeticsEnabled and SyndeticsCoverImages
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: joubu <jonathan.druart@bugs.koha-community.org>
Comment 11 PTFS Europe Sandboxes 2021-05-04 12:18:27 UTC
Created attachment 120447 [details] [review]
Bug 28180: Reintroduce and adjust Google Jackets

Test plan:
1. Turn on GoogleJackets
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: joubu <jonathan.druart@bugs.koha-community.org>
Comment 12 PTFS Europe Sandboxes 2021-05-04 12:18:31 UTC
Created attachment 120448 [details] [review]
Bug 28180: Reintroduce and adjust OpenLibrary

1. Turn on OpenLibraryCovers
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: joubu <jonathan.druart@bugs.koha-community.org>
Comment 13 PTFS Europe Sandboxes 2021-05-04 12:18:34 UTC
Created attachment 120449 [details] [review]
Bug 28180: Reintroduce and adjust Baker and Taylor

Test plan:
1. Turn on BakerTaylorEnabled and fill BakerTaylorUsername/BakerTaylorPassword (if you don't have, ask me)
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: joubu <jonathan.druart@bugs.koha-community.org>
Comment 14 PTFS Europe Sandboxes 2021-05-04 12:18:38 UTC
Created attachment 120450 [details] [review]
Bug 28180: Bug fix - cannot select cover-nav button when on top of the .contentblock

Found a bug and ended up with this solution, suggestions welcomed!

example with OpenLibrary with isbn=9780670026623, the image is a bit
higher than others and then the cover-nav buttons are on top of
.contentblock and cannot be clicked

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: joubu <jonathan.druart@bugs.koha-community.org>
Comment 15 Jonathan Druart 2021-05-04 13:39:44 UTC
Created attachment 120464 [details] [review]
Bug 28180: Add Chocolat to OPAC

See Bug 28179: Add the Chocolat gallery lightbox JS library

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Comment 16 Jonathan Druart 2021-05-04 13:39:49 UTC
Created attachment 120465 [details] [review]
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: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Comment 17 Jonathan Druart 2021-05-04 13:39:53 UTC
Created attachment 120466 [details] [review]
Bug 28180: Reintroduce and adjust Syndetics

Test plan:
1. Enable SyndeticsEnabled and SyndeticsCoverImages
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Comment 18 Jonathan Druart 2021-05-04 13:39:57 UTC
Created attachment 120467 [details] [review]
Bug 28180: Reintroduce and adjust Google Jackets

Test plan:
1. Turn on GoogleJackets
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Comment 19 Jonathan Druart 2021-05-04 13:40:01 UTC
Created attachment 120468 [details] [review]
Bug 28180: Reintroduce and adjust OpenLibrary

1. Turn on OpenLibraryCovers
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Comment 20 Jonathan Druart 2021-05-04 13:40:06 UTC
Created attachment 120469 [details] [review]
Bug 28180: Reintroduce and adjust Baker and Taylor

Test plan:
1. Turn on BakerTaylorEnabled and fill BakerTaylorUsername/BakerTaylorPassword (if you don't have, ask me)
2. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Comment 21 Jonathan Druart 2021-05-04 13:40:10 UTC
Created attachment 120470 [details] [review]
Bug 28180: Bug fix - cannot select cover-nav button when on top of the .contentblock

Found a bug and ended up with this solution, suggestions welcomed!

example with OpenLibrary with isbn=9780670026623, the image is a bit
higher than others and then the cover-nav buttons are on top of
.contentblock and cannot be clicked

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Comment 22 Jonathan Druart 2021-05-04 13:41:10 UTC
Signed-off-by patches attached on behalf of the sponsor.
The sandbox's signoff process picked the name of the creator of the sandbox instead of the one filled in on the signoff form.

Also, the status has not been adjusted.
Comment 23 Katrin Fischer 2021-05-09 11:34:29 UTC
I am seeing a failure in the QA script, can you please check:

 FAIL	koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
   OK	  filters
   FAIL	  forbidden patterns
		forbidden pattern: console.log (line 1754)

Also and more importantly, with this patch covers on result list are broken:

Uncaught ReferenceError: NO_LOCAL_JACKET is not defined
    GetCoverFromBibnumber http://localhost:8080/opac-tmpl/bootstrap/js/localcovers_20.1200047.js:25
    jQuery 2
    GetCoverFromBibnumber http://localhost:8080/opac-tmpl/bootstrap/js/localcovers_20.1200047.js:21
    <anonymous> http://localhost:8080/cgi-bin/koha/opac-search.pl?idx=&q=perl&weight_search=1:3137
    jQuery 2
Comment 24 Jonathan Druart 2021-05-10 07:16:21 UTC
Created attachment 120753 [details] [review]
Bug 28180: (follow-up) Remove console.log
Comment 25 Jonathan Druart 2021-05-10 07:16:26 UTC
Created attachment 120754 [details] [review]
Bug 28180: Restore NO_LOCAL_JACKET

This is a patch to squash. No idea what it got removed previously
Comment 26 Jonathan Druart 2021-05-10 07:17:06 UTC
(In reply to Katrin Fischer from comment #23)

Both fixed!
Comment 27 Owen Leonard 2021-05-10 18:27:40 UTC
Created attachment 120805 [details] [review]
Bug 28180: (follow-up) Updates to styling of lightbox controls

This patch adds style changes like the ones made in Bug 28179. It also
addresses a bug with the way the verify_images() function was firing.
I've moved the function outside of document.ready() and added a call to
it on window load, consistent with how it works in the staff client.

I've removed a redundant call to verify_images() from the footer include
file, opac-bottom.inc.

The cosmetic changes replace the Chocolat image icons with new SVG
assets based on Bootstrap Icons (https://icons.getbootstrap.com/). The
color changes I think help the controls to be more visible.