Bug 28235 - Custom cover images are very large in staff search results and OPAC details
Summary: Custom cover images are very large in staff search results and OPAC details
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-04-27 10:53 UTC by Minna Kivinen
Modified: 2023-06-08 22:32 UTC (History)
2 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.01


Attachments
Test records (3.30 KB, application/marc)
2022-10-31 21:00 UTC, Caroline Cyr La Rose
Details
Bug 28235: Correct CSS governing max width of custom cover images (2.94 KB, patch)
2022-11-18 16:16 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28235: Correct CSS governing max width of custom cover images (2.99 KB, patch)
2022-11-22 22:32 UTC, David Nind
Details | Diff | Splinter Review
Bug 28235: Correct CSS governing max width of custom cover images (3.04 KB, patch)
2022-12-04 12:49 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 28235: Correct CSS governing max width of custom cover images (3.05 KB, patch)
2022-12-04 13:07 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Minna Kivinen 2021-04-27 10:53:07 UTC
Cover images are showing very large on search result. At least when using CustomCoverImages.
Comment 1 Caroline Cyr La Rose 2022-10-31 21:00:23 UTC
I agree. I think we should limit the size of the image, regardless of the source image size. The problem is present in the staff interface search results and in the OPAC detailed record.

I created a MARC21 file with a couple of records, including one that has a image URL in 956$u.

To test:
Note: I used MARC 21
1. In Koha, add 956$u to the default MARC bibliographic framework
   1.1. Go to Administration > MARC bibliographic framework
   1.2. Click "Actions" > "MARC Structure" to the right of the default framework
   1.3. Search for tag 956
   1.4. Click "Actions" > "Edit subfields" next to 956
   1.5. Go to the "u" tab
   1.6. Make sure the subfield is managed in tab 9
   1.7. In Visibility, check OPAC, Intranet, and Editor
   1.8. Click "Save changes"

2. Edit the CustomCoverImages system preferences
   2.1. Go to Administration > Global system preferences
   2.2. Search for CustomCoverImages
   2.3. Edit the system preferences like this
        - CustomCoverImages: Show
        - OPACCustomCoverImages: Show
        - CustomCoverImagesURL: {956$u}
   2.4. Click Save all Enhanced content preferences

3. Import the test records
   3.1. Download the test record file
   3.2. Go to Cataloging > Stage records for import
   3.3. Click "Browse" and choose the test file
   3.4. Click "Upload file"
   3.5. Click "Stage for import"
   3.6. Click "View details of enqueued job"
   3.7. Click "View batch"
   3.8. Click "Import this batch into the catalog"

4. In the staff interface, search the catalogue for "As you like it"
--> Note that the image is huge

5. Click on the title to access the detailed record
--> Note that the image is a normal size

6. Go to the OPAC, search for "As you like it"
--> Note that the image is a normal size

7. Click on the title to access the detailed record
--> Note that the image is huge
Comment 2 Caroline Cyr La Rose 2022-10-31 21:00:58 UTC
Created attachment 142841 [details]
Test records

A file with a couple of records, one of which has an image URL in 956$u.
Comment 3 Caroline Cyr La Rose 2022-11-14 20:10:26 UTC
While this is being corrected, adding the following code in OPACUserCSS will limit the size of the image in OPAC results so that it doesn't take the whole screen

.cover-image img {
  max-width : 200px;
}

For the intranet, in IntranetUserCSS

td.bookcoverimg {
  max-width : 200px;
}
Comment 4 Owen Leonard 2022-11-18 16:16:21 UTC
Created attachment 144072 [details] [review]
Bug 28235: Correct CSS governing max width of custom cover images

Images shown in the OPAC and staff interface when the
OPACCustomCoverImages and  CustomCoverImages preferences are enabled
should be getting a max-width set in the current CSS, but the order of
the declarations is preventing the correct specificity.

This patch moves the CSS to the correct place in each file so that the
max-width is applied.

To test, apply the patch and rebuild both the staff and OPAC CSS. If you
get an error during the build process you may need to run 'yarn
install.'

- Go to Administration -> System preferences, and enable the
  OPACCustomCoverImages and  CustomCoverImages preferences.
- If you're testing with the default test database you can set the
  CustomCoverImagesURL preference to
  https://static.myacpl.org/public/covers/{normalized_isbn}.jpg
- Perform a catalog search in both OPAC and staff client limiting by
  itemtype = 'Book'.
- The search results in both interface should show several covers
  supplied from the external URL.
- In the staff client, these images should be limited to 140px wide even
  if the source image is larger.
- In the OPAC, view the detail page for one of the results with cover
  images. The image shown on the detail page should be constrained to
  140px wide even if the source image is larger.
Comment 5 David Nind 2022-11-22 22:32:49 UTC
Created attachment 144177 [details] [review]
Bug 28235: Correct CSS governing max width of custom cover images

Images shown in the OPAC and staff interface when the
OPACCustomCoverImages and  CustomCoverImages preferences are enabled
should be getting a max-width set in the current CSS, but the order of
the declarations is preventing the correct specificity.

This patch moves the CSS to the correct place in each file so that the
max-width is applied.

To test, apply the patch and rebuild both the staff and OPAC CSS. If you
get an error during the build process you may need to run 'yarn
install.'

- Go to Administration -> System preferences, and enable the
  OPACCustomCoverImages and  CustomCoverImages preferences.
- If you're testing with the default test database you can set the
  CustomCoverImagesURL preference to
  https://static.myacpl.org/public/covers/{normalized_isbn}.jpg
- Perform a catalog search in both OPAC and staff client limiting by
  itemtype = 'Book'.
- The search results in both interface should show several covers
  supplied from the external URL.
- In the staff client, these images should be limited to 140px wide even
  if the source image is larger.
- In the OPAC, view the detail page for one of the results with cover
  images. The image shown on the detail page should be constrained to
  140px wide even if the source image is larger.

Signed-off-by: David Nind <david@davidnind.com>
Comment 6 Katrin Fischer 2022-12-04 12:49:37 UTC
Created attachment 144419 [details] [review]
Bug 28235: Correct CSS governing max width of custom cover images

Images shown in the OPAC and staff interface when the
OPACCustomCoverImages and  CustomCoverImages preferences are enabled
should be getting a max-width set in the current CSS, but the order of
the declarations is preventing the correct specificity.

This patch moves the CSS to the correct place in each file so that the
max-width is applied.

To test, apply the patch and rebuild both the staff and OPAC CSS. If you
get an error during the build process you may need to run 'yarn
install.'

- Go to Administration -> System preferences, and enable the
  OPACCustomCoverImages and  CustomCoverImages preferences.
- If you're testing with the default test database you can set the
  CustomCoverImagesURL preference to
  https://static.myacpl.org/public/covers/{normalized_isbn}.jpg
- Perform a catalog search in both OPAC and staff client limiting by
  itemtype = 'Book'.
- The search results in both interface should show several covers
  supplied from the external URL.
- In the staff client, these images should be limited to 140px wide even
  if the source image is larger.
- In the OPAC, view the detail page for one of the results with cover
  images. The image shown on the detail page should be constrained to
  140px wide even if the source image is larger.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin <katrin.fischer.83@web.de>
Comment 7 Katrin Fischer 2022-12-04 13:07:34 UTC
Created attachment 144421 [details] [review]
Bug 28235: Correct CSS governing max width of custom cover images

Images shown in the OPAC and staff interface when the
OPACCustomCoverImages and  CustomCoverImages preferences are enabled
should be getting a max-width set in the current CSS, but the order of
the declarations is preventing the correct specificity.

This patch moves the CSS to the correct place in each file so that the
max-width is applied.

To test, apply the patch and rebuild both the staff and OPAC CSS. If you
get an error during the build process you may need to run 'yarn
install.'

- Go to Administration -> System preferences, and enable the
  OPACCustomCoverImages and  CustomCoverImages preferences.
- If you're testing with the default test database you can set the
  CustomCoverImagesURL preference to
  https://static.myacpl.org/public/covers/{normalized_isbn}.jpg
- Perform a catalog search in both OPAC and staff client limiting by
  itemtype = 'Book'.
- The search results in both interface should show several covers
  supplied from the external URL.
- In the staff client, these images should be limited to 140px wide even
  if the source image is larger.
- In the OPAC, view the detail page for one of the results with cover
  images. The image shown on the detail page should be constrained to
  140px wide even if the source image is larger.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 8 Tomás Cohen Arazi 2022-12-07 14:39:26 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 9 Jacob O'Mara 2022-12-08 11:11:09 UTC
Nice work, thanks everyone!

Pushed to 22.11.x for the next release.