From 98f847be3a7e2d3e28db977085a577b8295cc620 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@odoo.com>
Date: Thu, 12 Sep 2019 09:47:09 +0000
Subject: [PATCH] [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
---
 addons/website_profile/views/website_profile.xml          | 4 +++-
 .../views/website_slides_templates_course.xml             | 2 +-
 .../views/website_slides_templates_homepage.xml           | 8 ++++----
 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'], '&amp;res_model=%s&amp;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'], '&amp;res_model=%s&amp;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>