25031 – Improve handling of multiple covers on the biblio detail page in the staff client

Bug 25031 - Improve handling of multiple covers on the biblio detail page in the staff client

Summary: Improve handling of multiple covers on the biblio detail page in the staff cl...

Status:	CLOSED FIXED

Alias:	None

Product:	Koha
Classification:	Unclassified
Component:	Templates (show other bugs)
Version:	Main
Hardware:	All All

Importance:	P5 - low enhancement
Assignee:	Owen Leonard
QA Contact:

URL:
Keywords:

Duplicates (1):	25924 (view as bug list)
Depends on:	25016
Blocks:	25846
	Show dependency tree / graph

Reported:	2020-03-31 21:35 UTC by Owen Leonard
Modified:	2022-06-06 20:24 UTC (History)
CC List:	3 users (show)

See Also:
Change sponsored?:	---
Patch complexity:	Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:	This enhancement improves the display of multiple covers for a record in the staff interface, including covers from these services: - Amazon - Local cover images (including multiple local cover images) - Coce (serving up Amazon, Google, and OpenLibrary images) - Images from the CustomCoverImages preference
Version(s) released in:	20.11.00
Circulation function:

Attachments
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client (22.15 KB, patch) 2020-03-31 22:11 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client (22.26 KB, patch) 2020-04-02 12:33 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client (22.22 KB, patch) 2020-04-15 22:07 UTC, Lucas Gass (lukeg)	Details \| Diff \| Splinter Review
Bug 25031: (QA follow-up) Improve handling of one or fewer images (4.86 KB, patch) 2020-04-16 12:29 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client (22.25 KB, patch) 2020-06-17 21:46 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 25031: (QA follow-up) Improve handling of one or fewer images (4.05 KB, patch) 2020-06-17 21:46 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client (22.30 KB, patch) 2020-07-06 21:31 UTC, Katrin Fischer	Details \| Diff \| Splinter Review
Bug 25031: (QA follow-up) Improve handling of one or fewer images (4.10 KB, patch) 2020-07-06 21:31 UTC, Katrin Fischer	Details \| Diff \| Splinter Review
Bug 25031: (QA follow-up) Avoid displaying extra navigation (4.34 KB, patch) 2020-07-23 19:51 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 25031: (follow-up) Fix markup error and restore cover class (2.08 KB, patch) 2020-07-24 11:22 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Show Obsolete (6) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.

Description Owen Leonard 2020-03-31 21:35:18 UTC

I'd like to make a change to the bibliographic detail page in the staff client so that multiple images from multiple sources are handled more gracefully.

See the short animation here:

https://zivotdesign.com/p/uploads/big/84d60322591e773a46c0abb840c65721.gif

Comment 1 Owen Leonard 2020-03-31 22:11:26 UTC Comment hidden (obsolete)

Created attachment 102162 [details] [review]
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client

This patch modifies the template, JS, and CSS for the bibliographic
detail page in order to gracefully handle multiple cover images.

The changed version loops through any cover images which might be
embedded and checks that they are successfully loaded. Only
successfully-loaded images are shown. Only the first image is shown, and
the others can be "paged through" using generated navigation controls.

To test, apply the page and rebuild the staff client 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 (including multiple local cover images)
 - Coce (serving up Amazon, Google, and OpenLibrary images)
 - Images from the CustomCoverImages preference

View a variety of titles and confirm that the cover images are
displaying correctly, whether there be 0, 1, 2, or more covers
available.

Comment 2 David Nind 2020-04-01 02:51:16 UTC

I have tested with Amazon and local cover images, and it seems to work okay.

I don't have access to a Coce server, so I wasn't able to test that.

I did note that if there is no image available, then there is a visible border but with nothing inside of it.

Comment 3 Owen Leonard 2020-04-02 12:33:49 UTC Comment hidden (obsolete)

Created attachment 102295 [details] [review]
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client

This patch modifies the template, JS, and CSS for the bibliographic
detail page in order to gracefully handle multiple cover images.

The changed version loops through any cover images which might be
embedded and checks that they are successfully loaded. Only
successfully-loaded images are shown. Only the first image is shown, and
the others can be "paged through" using generated navigation controls.

To test, apply the page and rebuild the staff client 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 (including multiple local cover images)
 - Coce (serving up Amazon, Google, and OpenLibrary images)
 - Images from the CustomCoverImages preference

View a variety of titles and confirm that the cover images are
displaying correctly, whether there be 0, 1, 2, or more covers
available.

Comment 4 David Nind 2020-04-02 19:00:19 UTC

(In reply to David Nind from comment #2)

> I did note that if there is no image available, then there is a visible
> border but with nothing inside of it.

This is now fixed. Thanks Owen!

Comment 5 Lucas Gass (lukeg) 2020-04-15 22:07:54 UTC Comment hidden (obsolete)

Created attachment 103040 [details] [review]
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client

This patch modifies the template, JS, and CSS for the bibliographic
detail page in order to gracefully handle multiple cover images.

The changed version loops through any cover images which might be
embedded and checks that they are successfully loaded. Only
successfully-loaded images are shown. Only the first image is shown, and
the others can be "paged through" using generated navigation controls.

To test, apply the page and rebuild the staff client 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 (including multiple local cover images)
 - Coce (serving up Amazon, Google, and OpenLibrary images)
 - Images from the CustomCoverImages preference

View a variety of titles and confirm that the cover images are
displaying correctly, whether there be 0, 1, 2, or more covers
available.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Comment 6 Lucas Gass (lukeg) 2020-04-15 22:08:30 UTC

I love this patch.

Comment 7 Jonathan Druart 2020-04-16 11:32:12 UTC

1. Should not we hide the green dot if there is only 1 image?

2. Clicking a blue dot (select another image), the scrollbar is hitting the top (preventDefault is missing?)

3. Without cover images, I see the border of #cover-slides, then disappears. Cannot we avoid that?

Comment 8 Owen Leonard 2020-04-16 12:29:13 UTC Comment hidden (obsolete)

Created attachment 103079 [details] [review]
Bug 25031: (QA follow-up) Improve handling of one or fewer images

This patch addresses a few issues raised during QA:

1. If there are no images, avoid the momentary appearance of an empty
   borered box. The class controlling the appearance of the box is now
   added after initialization.
2. If there is only one image, remove the control for switching between
   covers.
3. Add "preventDefault" to cover naviation click handler.
4. Correct translation function in localcovers.js.

This patch modifies SCSS, so rebuilding the staff client CSS is
necessary for testing.

Comment 9 Owen Leonard 2020-04-16 13:08:17 UTC

Marking failed QA because the reliability of this patch's intended behavior seems to be problematic.

Comment 10 Owen Leonard 2020-06-17 21:46:36 UTC Comment hidden (obsolete)

Created attachment 105986 [details] [review]
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client

This patch modifies the template, JS, and CSS for the bibliographic
detail page in order to gracefully handle multiple cover images.

The changed version loops through any cover images which might be
embedded and checks that they are successfully loaded. Only
successfully-loaded images are shown. Only the first image is shown, and
the others can be "paged through" using generated navigation controls.

To test, apply the page and rebuild the staff client 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 (including multiple local cover images)
 - Coce (serving up Amazon, Google, and OpenLibrary images)
 - Images from the CustomCoverImages preference

View a variety of titles and confirm that the cover images are
displaying correctly, whether there be 0, 1, 2, or more covers
available.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Comment 11 Owen Leonard 2020-06-17 21:46:41 UTC Comment hidden (obsolete)

Created attachment 105987 [details] [review]
Bug 25031: (QA follow-up) Improve handling of one or fewer images

This patch addresses a few issues raised during QA:

1. If there are no images, avoid the momentary appearance of an empty
   borered box. The class controlling the appearance of the box is now
   added after initialization.
2. If there is only one image, remove the control for switching
   between covers.
3. Add "preventDefault" to cover naviation click handler.
4. Correct translation function in localcovers.js.

This patch modifies SCSS, so rebuilding the staff client CSS is
necessary for testing.

Comment 12 Katrin Fischer 2020-07-06 21:30:12 UTC

I really like this, would love to see results changed as well!

Comment 13 Katrin Fischer 2020-07-06 21:31:20 UTC

Created attachment 106612 [details] [review]
Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client

This patch modifies the template, JS, and CSS for the bibliographic
detail page in order to gracefully handle multiple cover images.

The changed version loops through any cover images which might be
embedded and checks that they are successfully loaded. Only
successfully-loaded images are shown. Only the first image is shown, and
the others can be "paged through" using generated navigation controls.

To test, apply the page and rebuild the staff client 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 (including multiple local cover images)
 - Coce (serving up Amazon, Google, and OpenLibrary images)
 - Images from the CustomCoverImages preference

View a variety of titles and confirm that the cover images are
displaying correctly, whether there be 0, 1, 2, or more covers
available.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Comment 14 Katrin Fischer 2020-07-06 21:31:24 UTC

Created attachment 106613 [details] [review]
Bug 25031: (QA follow-up) Improve handling of one or fewer images

This patch addresses a few issues raised during QA:

1. If there are no images, avoid the momentary appearance of an empty
   borered box. The class controlling the appearance of the box is now
   added after initialization.
2. If there is only one image, remove the control for switching
   between covers.
3. Add "preventDefault" to cover naviation click handler.
4. Correct translation function in localcovers.js.

This patch modifies SCSS, so rebuilding the staff client CSS is
necessary for testing.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Comment 15 Jonathan Druart 2020-07-20 14:42:29 UTC

I have enabled:

 AdlibrisCoversEnabled
 AmazonCoverImages
 GoogleJackets
 AllowMultipleCovers
 CustomCoverImages
 LocalCoverImages
 OPACLocalCoverImages

Use biblionumber=22 from misc4dev

I see "Image from Adlibris" and one image

Edit, attach image, select an image

I now see 3 dots, first is the local image, second is adlibris: https://snipboard.io/CdOwKt.jpg

Third is... I don't know! https://snipboard.io/gL8wev.jpg

Comment 16 Owen Leonard 2020-07-23 19:51:35 UTC

Created attachment 107272 [details] [review]
Bug 25031: (QA follow-up) Avoid displaying extra navigation

This patch reworks the construction of the navigation links in such a
way that they are built during a loop over an updated jQuery object.
Previously the stored variable might not reflect that some elements
had been removed.

Comment 17 Jonathan Druart 2020-07-24 08:55:15 UTC

Not considering this blocker but may be good to fix:
With more than 1 cover: https://snipboard.io/MC8sRx.jpg
With 1 cover: https://snipboard.io/fqz60Y.jpg

I'd say we should add a bit of margin-top if only 1 cover.

Please attach a follow-up here if it can be fixed easily.

Comment 18 Jonathan Druart 2020-07-24 09:57:09 UTC

I found a blocker bug:
reset_all (no cover image prefs are set)
Go to the detail page
=> None of the links from #catalogue_detail_biblio are clickable (like there is a layer on top of it)

If I turn on LocalCoverImages, the links work (!)

Comment 19 Owen Leonard 2020-07-24 11:22:52 UTC

Created attachment 107310 [details] [review]
Bug 25031: (follow-up) Fix markup error and restore cover class

This patch corrects a markup error that appears when no cover image
services are enabled. An unclosed <div> caused links on the page to
break.

This patch also restores a part of the cover-handling script which adds
a bordered style to the cover image "tiles"

Comment 20 Jonathan Druart 2020-07-24 12:14:08 UTC

Pushed to master for 20.11, thanks to everybody involved!

Comment 21 Lucas Gass (lukeg) 2020-07-31 20:06:40 UTC

This is awesome but I will not backport the enhancement to 20.05.x

Comment 22 Owen Leonard 2020-09-10 18:19:30 UTC

*** Bug 25924 has been marked as a duplicate of this bug. ***