[IMP] website: improvement regarding social image

This commit introduce multiple improvements regarding social image:
  - (perf) Don't read ir.attachment through `social_default_image` when it is
    not needed. Use a stored boolean to know if the field should be accessed.
    This will remove one SQL query in attachment for public user.
  - Show website logo, not the company logo since we now have a different logo
    for website.
  - Don't show images lower than 200 width or 200 height px. Logo will be
    shown regardless of his size.
  - Don't show website logo if there is a website social_default_image.
    Indeed, the spec was to prevent showing logo and social_default_image if
    they are the same image. Technically, this is hard to identify as they
    could be the same image uploaded with different resolutions (media dialog),
    especially if one of those was uploaded through the backend and one from
    the frontend.
    It is most likely we will never correctly identify duplicate as they won't
    be exactly the same.
    For this reason, it makes more sense to hide the website logo if the
    social_default_image is set. It avoids every issues while it makes sense
    since you won't want to use the logo over the social_default_image. If you
    really want to, you could reupload it through the SEO media dialog.

closes odoo/odoo#47848

Related: odoo/upgrade#1012
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
Co-authored-by: Romain Derie <rde@odoo.com>
Co-authored-by: Jeremy Kersten <jke@odoo.com>

2 files changed, 25 insertions, 27 deletions

diff --git a/addons/website/static/src/js/menu/seo.js b/addons/website/static/src/js/menu/seo.js
index 16492318c54..593aa8f491f 100644
--- a/addons/website/static/src/js/menu/seo.js
+++ b/addons/website/static/src/js/menu/seo.js
@@ -267,11 +267,12 @@ var HtmlPage = Class.extend(mixins.PropertiesMixin, {
         };
     },
     images: function () {
-        return $('#wrap img').map(function () {
-            var $img = $(this);
-            return  {
-                src: $img.attr('src'),
-                alt: $img.attr('alt'),
+        return $('#wrap img').filter(function () {
+            return this.naturalHeight >= 200 && this.naturalWidth >= 200;
+        }).map(function () {
+            return {
+                src: this.getAttribute('src'),
+                alt: this.getAttribute('alt'),
             };
         });
     },
@@ -538,10 +539,13 @@ var MetaImageSelector = Widget.extend({
         this.metaTitle = data.title || '';
         this.activeMetaImg = data.metaImg;
         this.serverUrl = data.htmlpage.url();
-        data.pageImages.unshift(_.str.sprintf('/web/image/website/%s/logo', odoo.session_info.website_id));
-        data.pageImages.unshift(_.str.sprintf('/web/image/website/%s/social_default_image', odoo.session_info.website_id));
+        const imgField = data.hasSocialDefaultImage ? 'social_default_image' : 'logo';
+        data.pageImages.unshift(_.str.sprintf('/web/image/website/%s/%s', odoo.session_info.website_id, imgField));
         this.images = _.uniq(data.pageImages);
-        this.customImgUrl = _.contains(data.pageImages, data.metaImg) ? false : data.metaImg;
+        this.customImgUrl = _.contains(
+            data.pageImages.map((img)=>  new URL(img, window.location.origin).pathname),
+            new URL(data.metaImg, window.location.origin).pathname)
+            ? false : data.metaImg;
         this.previewDescription = data.previewDescription;
         this._setDescription(this.previewDescription);
         this._super(parent);
@@ -652,9 +656,10 @@ var SeoConfigurator = Dialog.extend({
             // Image selector
             self.metaImageSelector = new MetaImageSelector(self, {
                 htmlpage: self.htmlPage,
+                hasSocialDefaultImage: self.hasSocialDefaultImage,
                 title: self.htmlPage.getOgMeta().metaTitle,
-                metaImg : self.metaImg || self.htmlPage.getOgMeta().ogImageUrl,
-                pageImages : _.pluck(self.htmlPage.images().get(), 'src'),
+                metaImg: self.metaImg || self.htmlPage.getOgMeta().ogImageUrl,
+                pageImages: _.pluck(self.htmlPage.images().get(), 'src'),
                 previewDescription: _t('The description will be generated by social media based on page content unless you specify one.'),
             });
             self.metaImageSelector.appendTo(self.$('.js_seo_image'));
@@ -701,6 +706,7 @@ var SeoConfigurator = Dialog.extend({
             self.canEditDescription = data && ('website_meta_description' in data);
             self.canEditKeywords = data && ('website_meta_keywords' in data);
             self.metaImg = data.website_meta_og_img;
+            self.hasSocialDefaultImage = data.has_social_default_image;
             if (!self.canEditTitle && !self.canEditDescription && !self.canEditKeywords) {
                 // disable the button to prevent an error if the current page doesn't use the mixin
                 // we make the check here instead of on the view because we don't need to check
@@ -761,24 +767,16 @@ var SeoConfigurator = Dialog.extend({
                 // return Promise.reject(new Error("No main_object was found."));
                 resolve(null);
             } else {
-                var fields = ['website_meta_title', 'website_meta_description', 'website_meta_keywords'
-                                ,'website_meta_og_img'];
-                if (obj.model === 'website.page') {
-                    fields.push('website_indexed');
-                    fields.push('website_id');
-                }
                 rpc.query({
-                    model: obj.model,
-                    method: 'read',
-                    args: [[obj.id], fields],
+                    route: "/website/get_seo_data",
+                    params: {
+                        'res_id': obj.id,
+                        'res_model': obj.model,
+                    },
                 }).then(function (data) {
-                    if (data.length) {
-                        var meta = data[0];
-                        meta.model = obj.model;
-                        resolve(meta);
-                    } else {
-                        resolve(null);
-                    }
+                    var meta = data;
+                    meta.model = obj.model;
+                    resolve(meta);
                 }).guardedCatch(reject);
             }
         });
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index de1fc86fa23..aecbd6da8d9 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -126,7 +126,7 @@
         <div class="row">
             <div class="col-lg-6">
                 <t t-foreach="widget.images" t-as="image">
-                    <div t-attf-class="o_meta_img mt4 #{image === widget.activeMetaImg and ' o_active_image' or ''}">
+                    <div t-attf-class="o_meta_img mt4 #{new window.URL(image, window.location.origin).pathname === new window.URL(widget.activeMetaImg, window.location.origin).pathname and ' o_active_image' or ''}">
                         <img t-att-src="image"/>
                     </div>
                 </t>