[FIX] website_forum: force image size in css to handle gifs

Issue

	- Preferences > Change your avatar with a big .gif
	- Install Forum
	- Go on a question

	The gif is not resized in the nav and in the post
	answer box

Cause

	In fact, all gifs are not really resized. They just
	look fine because there is CSS to handle the case
	where the server resize does not work.

Solution

	Do as it is done everywhere else, add CSS rules

OPW-2223260

closes odoo/odoo#48792

X-original-commit: 35137cea7fd0eef067749721ef808acd298e0aae
Signed-off-by: Jason Van Malder (jvm) <jvm@odoo.com>

2 files changed, 19 insertions, 3 deletions

diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index a582d3f0a08..1ca07320d02 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -28,6 +28,10 @@ $bronze: #eea91e;
             background-color: rgba(theme-color('info'), 0.1);
             color: darken(theme-color('info'), 15%)!important;
         }
+
+        img.o_forum_avatar {
+            @include size(30px);
+        }
     }
 
     // Single Post
@@ -48,6 +52,12 @@ $bronze: #eea91e;
             border-left: .25em solid gray('500');
             color: gray('600');
         }
+
+        #post_reply {
+            img.o_forum_avatar {
+                @include size(24px);
+            }
+        }
     }
 
     .o_wforum_readable {
@@ -206,6 +216,12 @@ img.o_forum_avatar_big {
     object-fit: cover;
 }
 
+.o_wprofile_email_validation_container {
+    img.o_forum_avatar {
+        @include size(16px);
+    }
+}
+
 .o_wforum_bio_popover_wrap {
     .o_wforum_bio_popover_name {
         address > div, span[data-oe-model="res.country"] {
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index ab687da717e..0912658105e 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -494,7 +494,7 @@
             data-toggle="tooltip"
             data-trigger="hover"
             title="My profile">
-            <img class="rounded-circle mr-1" t-att-src="website.image_url(user, 'image_128', '30x30')" alt="Avatar"/>
+            <img class="o_forum_avatar rounded-circle mr-1" t-att-src="website.image_url(user, 'image_128', '30x30')" alt="Avatar"/>
             <div>
                 <h6 class="my-0" t-esc="user_id.name"/>
                 <small class="text-muted font-weight-bold"><t t-esc="user_id.karma"/>xp</small>
@@ -578,7 +578,7 @@
                     </span>
                     <span t-if="my" t-attf-class="w-100 w-md-auto mb-2 mb-md-0 border rounded pl-2 d-inline-flex align-items-center justify-content-between #{search and 'ml-md-2'}">
                         <div>
-                            <img t-if="uid" class="rounded-circle mr-1" t-att-src="website.image_url(user, 'image_128', '16x16')" alt="Avatar"/>
+                            <img t-if="uid" class="o_forum_avatar rounded-circle mr-1" t-att-src="website.image_url(user, 'image_128', '16x16')" alt="Avatar"/>
                             <span t-if="my == 'favourites'"> My <b>Favourites</b></span>
                             <span t-elif="my == 'followed'"> I'm <b>Following</b></span>
                             <span t-elif="my == 'mine'"> My <b>Questions</b></span>
@@ -926,7 +926,7 @@
 <!-- Edition: post an answer -->
 <template id="post_answer">
     <div class="d-flex align-items-center mt-5 mb-2">
-        <img t-if="uid" t-attf-class="rounded-circle mr-2" t-att-src="website.image_url(user, 'image_128', '24x24')" alt="Avatar"/>
+        <img t-if="uid" t-attf-class="o_forum_avatar rounded-circle mr-2" t-att-src="website.image_url(user, 'image_128', '24x24')" alt="Avatar"/>
         <h4 class="my-0">Your Answer</h4>
     </div>
     <t t-if="request.params.get('nocontent')">