From 2dd8b585e6eaa8a64fec19f754ae1d475cc32e9a Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 18 Mar 2019 17:19:00 +0000
Subject: [PATCH] Bug 22445: (follow-up) Use CSS to set a max-width for images
 - OPAC

This patch adds some CSS and markup to OPAC templates so that custom
cover images have a maximum width of 140px (to match the width of
generated local cover image thumbnails). This prevents oversized images
from displaying inconsistently compared to images from other services.

To test, apply the patch and regenerate the OPAC CSS. Post an oversized
image which corresponds to a record in your OPAC which can be added to a
user's checkouts and to a list.

View the following pages to confirm that the image displays well:

 - OPAC search results
 - Bibliographic detail page
 - Shelf browser
 - List contents
 - Recent comments
 - "Your summary"

Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss              | 6 ++++++
 koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc   | 4 +++-
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt      | 6 +++---
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt     | 4 ++--
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt     | 9 +++++++++
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt | 2 +-
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt        | 2 +-
 7 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index e2c7ecd24c..da3f07d8dd 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -1047,6 +1047,12 @@ ul {
     }
 }
 
+.custom_cover_image {
+    img {
+        max-width: 140px;
+    }
+}
+
 .required {
     color: #C00;
 }
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
index a89edbd013..1ed61e5c40 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
@@ -62,7 +62,9 @@
                                     [% END %]
                                 [% END %]
                                 [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
-                                    <img alt="Cover image" src="[% item.biblio_object.custom_cover_image_url | url %]" />
+                                    <span class="custom_cover_image">
+                                        <img alt="Cover image" src="[% item.biblio_object.custom_cover_image_url | url %]" />
+                                    </span>
                                 [% END %]
 
                             </a>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
index ddbba38ed7..9724274ee8 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
@@ -99,9 +99,9 @@
                     [% END %]
                     [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
                          [% IF ( OPACURLOpenInNewWindow ) %]
-                            <a href="[% biblio.custom_cover_image_url | url %]" target="_blank" rel="noreferrer"><img alt="Cover image" src="[% biblio.custom_cover_image_url | url %]" /></a>
+                            <a class="custom_cover_image" href="[% biblio.custom_cover_image_url | url %]" target="_blank" rel="noreferrer"><img alt="Cover image" src="[% biblio.custom_cover_image_url | url %]" /></a>
                         [% ELSE %]
-                            <a href="[% biblio.custom_cover_image_url | url %]"><img alt="Cover image" src="[% biblio.custom_cover_image_url | url %]" /></a>
+                            <a class="custom_cover_image" href="[% biblio.custom_cover_image_url | url %]"><img alt="Cover image" src="[% biblio.custom_cover_image_url | url %]" /></a>
                         [% END %]
                     [% END %]
                     </div><!-- / #bookcover -->
@@ -974,7 +974,7 @@
                                         </a></div>
                                     [% END %]
                                 [% ELSE %]
-                                    <div id="addcomment"><a href="/cgi-bin/koha/opac-user.pl">Log in to your account</a> to post a comment.</div>
+                                    <div id="addcomment"><a class="login-link loginModal-trigger" role="button" data-toggle="modal" href="/cgi-bin/koha/opac-user.pl">Log in to your account</a> to post a comment.</div>
                                 [% END # / IF loggedinusername %]
                             </div> <!-- / #comments -->
                         [% END # / IF reviewson %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
index b45b4bc90b..3cfd6495a8 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -322,9 +322,9 @@
 
                                                     [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
                                                          [% IF ( OPACURLOpenInNewWindow ) %]
-                                                            <a href="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]" target="_blank" rel="noreferrer"><img alt="Cover image" src="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]" /></a>
+                                                            <a class="custom_cover_image" href="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]" target="_blank" rel="noreferrer"><img alt="Cover image" src="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]" /></a>
                                                         [% ELSE %]
-                                                            <a href="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]"><img alt="Cover image" src="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]" /></a>
+                                                            <a class="custom_cover_image" href="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]"><img alt="Cover image" src="[% SEARCH_RESULT.biblio_object.custom_cover_image_url | url %]" /></a>
                                                         [% END %]
                                                     [% END %]
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
index 37187dc21d..9678aee52c 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
@@ -360,6 +360,15 @@
                                                         [% END %]
 
                                                         [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
+                                                            [% IF ( itemsloo.BiblioDefaultViewmarc ) %]
+                                                                <a class="custom_cover_image" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% itemsloo.biblionumber |url %]">
+                                                            [% ELSE %]
+                                                                [% IF ( itemsloo.BiblioDefaultViewisbd ) %]
+                                                                    <a class="custom_cover_image" href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% itemsloo.biblionumber |url %]">
+                                                                [% ELSE %]
+                                                                    <a class="custom_cover_image" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% itemsloo.biblionumber |url %]">
+                                                                [% END %]
+                                                            [% END %]
                                                             <img alt="Cover image" src="[% itemsloo.biblio_object.custom_cover_image_url | url %]" /></a>
                                                         [% END %]
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt
index d37e110326..fbafb997b7 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt
@@ -150,7 +150,7 @@
                                         [% END %]
 
                                         [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
-                                            <a href="[% review.biblio_object.custom_cover_image_url | url %]"><img alt="Cover image" src="[% review.biblio_object.custom_cover_image_url | url %]" /></a>
+                                            <a class="custom_cover_image" href="[% review.biblio_object.custom_cover_image_url | url %]"><img alt="Cover image" src="[% review.biblio_object.custom_cover_image_url | url %]" /></a>
                                         [% END %]
 
                                     </td>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
index d28a34a9fc..36a538a57c 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
@@ -242,7 +242,7 @@
                                                     [% END %]
 
                                                     [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
-                                                        <a href="[% ISSUE.biblio_object.custom_cover_image_url | url %]"><img alt="Cover image" src="[% ISSUE.biblio_object.custom_cover_image_url | url %]" /></a>
+                                                        <a class="custom_cover_image" href="[% ISSUE.biblio_object.custom_cover_image_url | url %]"><img alt="Cover image" src="[% ISSUE.biblio_object.custom_cover_image_url | url %]" /></a>
                                                     [% END %]
 
                                                     [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]
-- 
2.11.0