Cover images are showing very large on search result. At least when using CustomCoverImages.
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
Created attachment 142841 [details] Test records A file with a couple of records, one of which has an image URL in 956$u.
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; }
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.
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>
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>
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>
Pushed to master for 23.05. Nice work everyone, thanks!
Nice work, thanks everyone! Pushed to 22.11.x for the next release.