|
Description
Jonathan Druart
2021-04-20 14:10:04 UTC
Created attachment 119914 [details] [review] Bug 28179: Add the Chocolat gallery lightbox JS library Chocolat is a lightbox JS library. https://chocolat.insipi.de https://github.com/nicolas-t/Chocolat https://chocolat.gitbook.io Why Chocolat? It's released under the GPL v3 license, easy to use, configure and extend, and is still maintained/active. (and it has a nice name) Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Created attachment 119915 [details] [review] Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface This patch adds the ability to display the cover images of a bibliographic record in a gallery. Cover images attached to items can also be displayed in separated galleries. 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 LocalCoverImages and AllowMultipleCovers 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 AmazonCoverImages b. Display the cover images in the gallery 4. Coce a. Turn on IntranetCoce, 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 CustomCoverImages 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 Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Created attachment 119916 [details] [review] Bug 28179: Adjust chocolat.js to display href In order to display link in the description we need to adjust chocolat.js Maybe this needs to be reported upstream Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) This works really well overall, but there is a problem when there is a language toolbar in the footer. The toolbar completely obscures the footer for the gallery. I have some CSS update suggestions but I'm not sure what is the best way to modify the CSS... Change the original, since we're already using a modified version of the JS? Add a second CSS file to override? Use a copy of the original which we track separately? The purpose of this change isn't clearly defined, but I think that I get the premise and it sounds interesting! I assume that this is a solution to the multiple cover problem? It would put the multiple book covers into a gallery that either manually or automatically scrolls on a per-row/biblio basis? (In reply to Owen Leonard from comment #4) > This works really well overall, but there is a problem when there is a > language toolbar in the footer. The toolbar completely obscures the footer > for the gallery. > > I have some CSS update suggestions but I'm not sure what is the best way to > modify the CSS... Change the original, since we're already using a modified > version of the JS? Add a second CSS file to override? Use a copy of the > original which we track separately? Good catch, thanks! I would add it to the same file, at the bottom, with a comment saying it's some specific for us. What CSS suggestions do you have? (In reply to David Cook from comment #5) > The purpose of this change isn't clearly defined, but I think that I get the > premise and it sounds interesting! > > I assume that this is a solution to the multiple cover problem? It would put > the multiple book covers into a gallery that either manually or > automatically scrolls on a per-row/biblio basis? Here the need is simply to display all the different cover images of a bibliographic record (or items) in a gallery. (In reply to Jonathan Druart from comment #6) > Here the need is simply to display all the different cover images of a > bibliographic record (or items) in a gallery. Ah I see just on the detail page and not the search results. Created attachment 120108 [details] [review] Bug 28179: (follow-up) Updates to styling of lightbox controls This patch fixes a bug and adds some style changes which I think are nice. The bugfix is to change the z-index of the lightbox footer so that it isn't hidden when there is a language menu in the footer. 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. License information about Bootstrap Icons has been added to the About page. This patch is working great, thanks Owen! Created attachment 120253 [details] [review] Bug 28179: Add the Chocolat gallery lightbox JS library Chocolat is a lightbox JS library. https://chocolat.insipi.de https://github.com/nicolas-t/Chocolat https://chocolat.gitbook.io Why Chocolat? It's released under the GPL v3 license, easy to use, configure and extend, and is still maintained/active. (and it has a nice name) Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Created attachment 120254 [details] [review] Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface This patch adds the ability to display the cover images of a bibliographic record in a gallery. Cover images attached to items can also be displayed in separated galleries. 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 LocalCoverImages and AllowMultipleCovers 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 AmazonCoverImages b. Display the cover images in the gallery 4. Coce a. Turn on IntranetCoce, 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 CustomCoverImages 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 Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Created attachment 120255 [details] [review] Bug 28179: Adjust chocolat.js to display href In order to display link in the description we need to adjust chocolat.js Maybe this needs to be reported upstream Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Created attachment 120256 [details] [review] Bug 28179: (follow-up) Updates to styling of lightbox controls This patch fixes a bug and adds some style changes which I think are nice. The bugfix is to change the z-index of the lightbox footer so that it isn't hidden when there is a language menu in the footer. 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. License information about Bootstrap Icons has been added to the About page. Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Created attachment 120409 [details] [review] Bug 28179: Add the Chocolat gallery lightbox JS library Chocolat is a lightbox JS library. https://chocolat.insipi.de https://github.com/nicolas-t/Chocolat https://chocolat.gitbook.io Why Chocolat? It's released under the GPL v3 license, easy to use, configure and extend, and is still maintained/active. (and it has a nice name) Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Created attachment 120410 [details] [review] Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface This patch adds the ability to display the cover images of a bibliographic record in a gallery. Cover images attached to items can also be displayed in separated galleries. 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 LocalCoverImages and AllowMultipleCovers 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 AmazonCoverImages b. Display the cover images in the gallery 4. Coce a. Turn on IntranetCoce, 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 CustomCoverImages 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 Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Created attachment 120411 [details] [review] Bug 28179: Adjust chocolat.js to display href In order to display link in the description we need to adjust chocolat.js Maybe this needs to be reported upstream Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Owen Leonard <oleonard@myacpl.org> Created attachment 120412 [details] [review] Bug 28179: (follow-up) Updates to styling of lightbox controls This patch fixes a bug and adds some style changes which I think are nice. The bugfix is to change the z-index of the lightbox footer so that it isn't hidden when there is a language menu in the footer. 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. License information about Bootstrap Icons has been added to the About page. Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Owen Leonard <oleonard@myacpl.org> Created attachment 120413 [details] [review] Bug 28179: (follow-up) Remove console.log This patch removes a "console.log" from detail.tt and replaces it with similar output to the user. It will probably never be triggered, but better to handle it gracefully than have a hidden log. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Created attachment 120459 [details] [review] Bug 28179: Add the Chocolat gallery lightbox JS library Chocolat is a lightbox JS library. https://chocolat.insipi.de https://github.com/nicolas-t/Chocolat https://chocolat.gitbook.io Why Chocolat? It's released under the GPL v3 license, easy to use, configure and extend, and is still maintained/active. (and it has a nice name) Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Created attachment 120460 [details] [review] Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface This patch adds the ability to display the cover images of a bibliographic record in a gallery. Cover images attached to items can also be displayed in separated galleries. 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 LocalCoverImages and AllowMultipleCovers 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 AmazonCoverImages b. Display the cover images in the gallery 4. Coce a. Turn on IntranetCoce, 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 CustomCoverImages 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 Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Created attachment 120461 [details] [review] Bug 28179: Adjust chocolat.js to display href In order to display link in the description we need to adjust chocolat.js Maybe this needs to be reported upstream Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Created attachment 120462 [details] [review] Bug 28179: (follow-up) Updates to styling of lightbox controls This patch fixes a bug and adds some style changes which I think are nice. The bugfix is to change the z-index of the lightbox footer so that it isn't hidden when there is a language menu in the footer. 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. License information about Bootstrap Icons has been added to the About page. Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Created attachment 120463 [details] [review] Bug 28179: (follow-up) Remove console.log This patch removes a "console.log" from detail.tt and replaces it with similar output to the user. It will probably never be triggered, but better to handle it gracefully than have a hidden log. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Signed-off-by patches attached on behalf of the sponsor. Created attachment 120731 [details] [review] Bug 28179: Add the Chocolat gallery lightbox JS library Chocolat is a lightbox JS library. https://chocolat.insipi.de https://github.com/nicolas-t/Chocolat https://chocolat.gitbook.io Why Chocolat? It's released under the GPL v3 license, easy to use, configure and extend, and is still maintained/active. (and it has a nice name) Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Created attachment 120732 [details] [review] Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface This patch adds the ability to display the cover images of a bibliographic record in a gallery. Cover images attached to items can also be displayed in separated galleries. 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 LocalCoverImages and AllowMultipleCovers 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 AmazonCoverImages b. Display the cover images in the gallery 4. Coce a. Turn on IntranetCoce, 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 CustomCoverImages 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 Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Created attachment 120733 [details] [review] Bug 28179: Adjust chocolat.js to display href In order to display link in the description we need to adjust chocolat.js Maybe this needs to be reported upstream Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch) Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Created attachment 120734 [details] [review] Bug 28179: (follow-up) Updates to styling of lightbox controls This patch fixes a bug and adds some style changes which I think are nice. The bugfix is to change the z-index of the lightbox footer so that it isn't hidden when there is a language menu in the footer. 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. License information about Bootstrap Icons has been added to the About page. Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Created attachment 120735 [details] [review] Bug 28179: (follow-up) Remove console.log This patch removes a "console.log" from detail.tt and replaces it with similar output to the user. It will probably never be triggered, but better to handle it gracefully than have a hidden log. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Overall this works pretty great, but I am seeing something confusing in my testing: I've uploaded 2 local bib level covers. I've activated AdLibris covers. Looking at the detail page, I have 3 dots below the first cover and can swith back and forth, so far so good. When I click on the "second" dot, that is the second local cover and the one before the Adlibris one there is a "loading" icon that is not going away. I've tried changing the sequence of covers and services, it appears to remain showing on the "last" local cover one. And it's only on record level, not on the item level covers. ... And it remains without the patch set, so I am inclined to move this forward, but maybe worth looking at? I have noticed that as well. Actually it's not a matter of position, but it depends on the size of the image. If the image is small you will see the loading image in the background. It's worth to open a new bug report. Thanks for the QA stamp! Pushed to master for 21.05, thanks to everybody involved! After discussion with Katrin and Owen I have decided to push this one for 21.05. It will help us to get feedbacks for the OPAC implementation (bug 28180) and eventually improve it for 21.11. (In reply to Jonathan Druart from comment #31) > I have noticed that as well. Actually it's not a matter of position, but it > depends on the size of the image. If the image is small you will see the > loading image in the background. > It's worth to open a new bug report. Done: bug 28314 Enhancement not pushed to 20.11.x |
