Attachment 90011 Details for Bug 22445 – Bug 22445: (follow-up) Use CSS to set a max-width for images - OPAC

[patch] Bug 22445: (follow-up) Use CSS to set a max-width for images - OPAC

Bug-22445-follow-up-Use-CSS-to-set-a-max-width-for.patch (text/plain), 10.60 KB, created by Michal Denar on 2019-05-23 08:25:57 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Michal Denar

Created: 2019-05-23 08:25:57 UTC

Size: 10.60 KB

patch

obsolete

>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>
>@@ -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> 
>                         [% 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

Actions: View | Diff | Splinter Review

Attachments on bug 22445: 85925 | 85926 | 85927 | 85928 | 85929 | 85930 | 85931 | 85932 | 85933 | 85934 | 85935 | 85936 | 85937 | 85938 | 86214 | 86726 | 86727 | 87434 | 89973 | 89974 | 89975 | 89976 | 89977 | 89978 | 89979 | 89980 | 89981 | 89982 | 89983 | 89984 | 89985 | 89986 | 89987 | 89988 | 89989 | 89996 | 89997 | 89998 | 89999 | 90000 | 90001 | 90002 | 90003 | 90004 | 90005 | 90006 | 90007 | 90009 | 90010 | 90011 | 90012 | 90013 | 94227 | 94228 | 94229 | 94230 | 94231 | 94232 | 94233 | 94234 | 94235 | 94236 | 94237 | 94238 | 94239 | 94240 | 94241 | 94242 | 94243 | 94244 | 94559 | 94560 | 94561 | 94562 | 94563 | 94564 | 94566 | 94567 | 94568 | 94569 | 94570 | 94571 | 94572 | 94573 | 94574 | 94575 | 94576 | 94577