Most libraries seem to prefer to having cover images on the OPAC results page appear to the left of the text, this is would also make the OPAC results conform with the results in the staff interface.
I wonder about usability here. If your covers have different sizes and or you are missing some, it might get a little harder to read the titles for quick orientation. For academic libraries we often only have a few covers per page.
Could we make this an optional change somehow? (using CSS or even a pref?)
Created attachment 93458 [details] search results with cover image
Katrin, I think this could be done much easier with CSS if we added a new <div> wrapper around the title and summary information. A common problem now is that results with too much information end up overflowing like the attached image.
Created attachment 93459 [details] [review] Bug 23720: Move cover images to the left side of results page
TEST PLAN: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side.
This looks like it will work well, but needs a minor change: You can't add a non-unique ID attribute to an element which will be repeated for each search results. I suggest this: <div id="title_summary_[% SEARCH_RESULT.biblionumber | html %]" class="title_summary"> That provides a class for global styling and a unique ID just in case.
Created attachment 93719 [details] [review] Bug 23720: Add div wrapper to search results to make moving cover images easier
TEST PLAN remains the same: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side.
Created attachment 93744 [details] [review] Bug 23720: Add div wrapper to search results to make moving cover images easier TEST PLAN: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side. Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Created attachment 93844 [details] [review] Bug 23720: Add div wrapper to search results to make moving cover images easier TEST PLAN: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Nice work! Pushed to master for 19.11.00