From 15295e317f6f400fa2b19fed2eea242fc2df84c2 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Tue, 21 Nov 2023 16:48:02 +0100
Subject: [PATCH] [IMP] website_slides: add `o_avatar` to User Avatar template

Prior to this commit, if the avatar image didn't have a 1:1 ratio,
the `rounded-circle` image would be oval instead of the intended circle.
To fix this we add the `o_avatar` class to the `img`, and since this
class already contains `object-fit: cover` from the element's inline
styles.

closes odoo/odoo#143109

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 .../views/website_slides_templates_course.xml               | 2 +-
 .../views/website_slides_templates_homepage.xml             | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index f84d5bcdec9..4d15702d5cb 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -404,7 +404,7 @@
                     t-att-data-visibility="channel.visibility">
                 <t t-call="website_slides.slides_misc_user_image">
                     <t t-set="img_class" t-value="'rounded-circle me-1'"/>
-                    <t t-set="img_style" t-value="'width: 1.4em; height: 1.4em; object-fit: cover;'"/>
+                    <t t-set="img_style" t-value="'width: 1.4em; height: 1.4em;'"/>
                 </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 4e829b561c4..b734892da6e 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -74,7 +74,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 me-1'"/>
-                                        <t t-set="img_style" t-value="'width: 22px; height: 22px; object-fit: cover;'"/>
+                                        <t t-set="img_style" t-value="'width: 22px; height: 22px;'"/>
                                     </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>
@@ -507,8 +507,8 @@
 </template>
 
 <template id='slides_misc_user_image' name="User Avatar">
-    <img t-att-class="img_class if img_class else 'rounded-circle float-start'"
-        t-att-style="img_style if img_style else 'width: 32px; height: 32px; object-fit: cover;'"
+    <img t-attf-class="o_avatar {{img_class or 'rounded-circle float-start'}}"
+        t-att-style="img_style if img_style else 'width: 32px; height: 32px;'"
         t-att-src="'/profile/avatar/%s?field=avatar_128' % user.id"
         t-att-alt="user.name"/>
 </template>