[FIX] website: save cover images as webp

When webp support was introduced in [1], images set on covers were not
handled.

This commit automatically converts to webp the images that are uploaded
in covers using the website builder.

Steps to reproduce:
- Edit a blog post page.
- Upload a JPEG cover picture.
- Save.

=> The cover picture was still a JPEG.

[1]: odoo@0449fe8

task-3761728

closes odoo#169822

X-original-commit: f9c9d6c
Signed-off-by: Benjamin Vray (bvr) <[email protected]>

Author: bso-odoo

addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js

@@ -933,7 +933,7 @@ export class WysiwygAdapterComponent extends Wysiwyg {
      * @private
      * @param {HTMLElement} editable
      */
-    _saveCoverProperties($elementToSave) {
+    async _saveCoverProperties($elementToSave) {
         var el = $elementToSave.closest('.o_record_cover_container')[0];
         if (!el) {
             return;
@@ -960,7 +960,32 @@ export class WysiwygAdapterComponent extends Wysiwyg {
         }
         this.__savedCovers[resModel].push(resID);
 
-        var cssBgImage = $(el.querySelector('.o_record_cover_image')).css('background-image');
+        const imageEl = el.querySelector('.o_record_cover_image');
+        let cssBgImage = imageEl.style.backgroundImage;
+        if (imageEl.classList.contains("o_b64_image_to_save")) {
+            imageEl.classList.remove("o_b64_image_to_save");
+            const groups = cssBgImage.match(/url\("data:(?<mimetype>.*);base64,(?<imageData>.*)"\)/)?.groups;
+            if (!groups.imageData) {
+                // Checks if the image is in base64 format for RPC call. Relying
+                // only on the presence of the class "o_b64_image_to_save" is not
+                // robust enough.
+                return;
+            }
+            const modelName = await this.websiteService.getUserModelName(resModel);
+            const recordNameEl = imageEl.closest("body").querySelector(`[data-oe-model="${resModel}"][data-oe-id="${resID}"][data-oe-field="name"]`);
+            const recordName = recordNameEl ? `'${recordNameEl.textContent}'` : resID;
+            const attachment = await this.rpc(
+                '/web_editor/attachment/add_data',
+                {
+                    name: `${modelName} ${recordName} cover image.${groups.mimetype.split("/")[1]}`,
+                    data: groups.imageData,
+                    is_image: true,
+                    res_model: resModel,
+                    res_id: resID,
+                },
+            );
+            cssBgImage = `url(${attachment.image_src})`;
+        }
         var coverProps = {
             'background-image': cssBgImage.replace(/"/g, '').replace(window.location.protocol + "//" + window.location.host, ''),
             'background_color_class': el.dataset.bgColorClass,

addons/website/static/src/js/editor/snippets.options.js

@@ -8,7 +8,12 @@ import weUtils from "@web_editor/js/common/utils";
 import options from "@web_editor/js/editor/snippets.options";
 import { NavbarLinkPopoverWidget } from "@website/js/widgets/link_popover_widget";
 import wUtils from "@website/js/utils";
-import {isImageCorsProtected, isImageSupportedForStyle} from "@web_editor/js/editor/image_processing";
+import {
+    applyModifications,
+    isImageCorsProtected,
+    isImageSupportedForStyle,
+    loadImageInfo,
+} from "@web_editor/js/editor/image_processing";
 import "@website/snippets/s_popup/options";
 import { range } from "@web/core/utils/numbers";
 import { _t } from "@web/core/l10n/translation";
@@ -2949,6 +2954,7 @@ options.registry.CoverProperties = options.Class.extend({
 
         this.$image = this.$target.find('.o_record_cover_image');
         this.$filter = this.$target.find('.o_record_cover_filter');
+        this.rpc = this.bindService("rpc");
     },
     /**
      * @override
@@ -2969,10 +2975,31 @@ options.registry.CoverProperties = options.Class.extend({
      * @see this.selectClass for parameters
      */
     background: async function (previewMode, widgetValue, params) {
+        if (previewMode === false) {
+            this.$image[0].classList.remove("o_b64_image_to_save");
+        }
         if (widgetValue === '') {
             this.$image.css('background-image', '');
             this.$target.removeClass('o_record_has_cover');
         } else {
+            if (previewMode === false) {
+                const imgEl = document.createElement("img");
+                imgEl.src = widgetValue;
+                await loadImageInfo(imgEl, this.rpc);
+                if (imgEl.dataset.mimetype && ![
+                    "image/gif",
+                    "image/svg+xml",
+                    "image/webp",
+                ].includes(imgEl.dataset.mimetype)) {
+                    // Convert to webp but keep original width.
+                    imgEl.dataset.mimetype = "image/webp";
+                    const base64src = await applyModifications(imgEl, {
+                        mimetype: "image/webp",
+                    });
+                    widgetValue = base64src;
+                    this.$image[0].classList.add("o_b64_image_to_save");
+                }
+            }
             this.$image.css('background-image', `url('${widgetValue}')`);
             this.$target.addClass('o_record_has_cover');
             const $defaultSizeBtn = this.$el.find('.o_record_cover_opt_size_default');