diff options
| author | Thibault Delavallée <tde@odoo.com> | 2019-09-12 09:47:09 +0000 |
|---|---|---|
| committer | Thibault Delavallée <tde@odoo.com> | 2019-09-13 10:05:15 +0000 |
| commit | 98f847be3a7e2d3e28db977085a577b8295cc620 (patch) | |
| tree | 41a79de0838b3c0676be4efcf7513bb6489d79dd | |
| parent | 477b73ed316307644876287c4f06c79a7afcc339 (diff) | |
[FIX] website_{slides, profile}: fix display of not square user image
When having not square images for user avatar several issues appear
* website_slides: heroes of the week banner is broken as circles are not
circles anymore. They look more like UFOs or funny snowmen;
* website_slides: my user status / leaderboard / achievements card display
is broken as image may take much more width than planned;
* website_slides: channel page view displays user avatar when having joined
it, and it is broken;
* website_profile: user avatars in top 3 of users karma ranking is broken.
In this commit we apply strict rules on width / height combined to an object
fit in order to always have a bioutifoul displayed circled image.
Task 2065425 (avatar ratio badly displayed)
PR #36756
3 files changed, 8 insertions, 6 deletions
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml index 4d77af30669..40330800585 100644 --- a/addons/website_profile/views/website_profile.xml +++ b/addons/website_profile/views/website_profile.xml @@ -514,7 +514,9 @@ <div class="card text-center mb-2 border-bottom-0 o_wprofile_pointer"> <div class="card-body"> <div class="d-inline-block position-relative"> - <img class="rounded-circle img-fluid" t-att-src="'/profile/avatar/%s?field=image_128%s' % (user['id'], '&res_model=%s&res_id=%s' % (record._name, record.id) if record else '')"/> + <img class="rounded-circle img-fluid" + style="width: 128px; height: 128px; object-fit: cover;" + t-att-src="'/profile/avatar/%s?field=image_256%s' % (user['id'], '&res_model=%s&res_id=%s' % (record._name, record.id) if record else '')"/> <img class="position-absolute" t-attf-src="/website_profile/static/src/img/rank_#{user_index + 1}.svg" alt="User rank" style="bottom: 0; right: -10px"/> </div> <h3 class="mt-2 mb-0" t-esc="user['name']"></h3> diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml index 1b92f589a5f..1361166321e 100644 --- a/addons/website_slides/views/website_slides_templates_course.xml +++ b/addons/website_slides/views/website_slides_templates_course.xml @@ -300,7 +300,7 @@ t-att-data-enroll="channel.enroll"> <t t-call="website_slides.slides_misc_user_image"> <t t-set="img_class" t-value="'rounded-circle mr-1'"/> - <t t-set="img_style" t-value="'height: 1.4em'"/> + <t t-set="img_style" t-value="'width: 1.4em; height: 1.4em; object-fit: cover;'"/> </t> <h6 class="d-flex flex-grow-1 my-0">You're enrolled</h6> <i class="fa fa-check"/> diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml index ee959eccca3..5270ad3c532 100644 --- a/addons/website_slides/views/website_slides_templates_homepage.xml +++ b/addons/website_slides/views/website_slides_templates_homepage.xml @@ -14,8 +14,8 @@ <div class="ml-4 ml-md-2 mt-3"> <t t-foreach="top3_users" t-as="user"> <img class="rounded-circle img-fluid shadow ml-n4" - style="border: 6px solid white; max-width: 40%" - t-attf-src="/web/image/res.users/#{user['id']}/image_128"/> + style="width: 140px; height: 140px; max-width: 40%; max-height: 40%; object-fit: cover; border: 6px solid white;" + t-attf-src="/web/image/res.users/#{user['id']}/image_256"/> </t> </div> </div> @@ -99,7 +99,7 @@ <div class="d-flex align-items-center"> <t t-call="website_slides.slides_misc_user_image"> <t t-set="img_class" t-value="'rounded-circle mr-1'"/> - <t t-set="img_style" t-value="'height: 22px'"/> + <t t-set="img_style" t-value="'width: 22px; height: 22px; object-fit: cover;'"/> </t> <h5 t-esc="user.name" class="d-flex flex-grow-1 mb-0"/> <a class="d-none d-lg-block" t-att-href="'/profile/user/%s' % user.id">View</a> @@ -451,7 +451,7 @@ <template id='slides_misc_user_image' name="User Avatar"> <img t-att-class="img_class if img_class else 'rounded-circle float-left'" - t-att-style="img_style if img_style else 'max-height: 32px;'" + t-att-style="img_style if img_style else 'width: 32px; height: 32px; object-fit: cover;'" t-att-src="'/profile/avatar/%s?field=image_128' % user.id" t-att-alt="user.name"/> </template> |