change mimetype image gallery

odoo-dev · Jan 30, 2025 · b2f5ed7 · b2f5ed7
1 parent e2e7537
commit b2f5ed7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/addons/html_builder/static/src/builder/options/image_gallery_option.js b/addons/html_builder/static/src/builder/options/image_gallery_option.js
@@ -1,5 +1,6 @@
 import { registry } from "@web/core/registry";
 import { Plugin } from "@html_editor/plugin";
+import { applyModifications, loadImageInfo } from "@html_editor/utils/image_processing";
 
 class ImageGalleryOption extends Plugin {
     static id = "ImageGalleryOption";
@@ -17,18 +18,21 @@ class ImageGalleryOption extends Plugin {
     getActions() {
         return {
             addImage: {
-                load: async () =>
-                    new Promise((resolve) => {
+                load: async ({ editingElement }) => {
+                    let selectedImages;
+                    await new Promise((resolve) => {
                         this.dependencies.media.openMediaDialog({
                             onlyImages: true,
                             multiImages: true,
                             save: (images) => {
-                                resolve(images);
+                                selectedImages = images;
+                                resolve();
                             },
                         });
-                    }),
-                apply: ({ editingElement, loadResult: images }) => {
-                    addImages(images, editingElement);
+                    });
+                    await addImages(selectedImages, editingElement);
+                },
+                apply: () => {
                     this.dependencies.history.addStep();
                 },
             },
@@ -43,7 +47,7 @@ class ImageGalleryOption extends Plugin {
 /**
  * Add the images selected in the media dialog in the gallery
  */
-function addImages(images, imageGalleryElement) {
+async function addImages(images, imageGalleryElement) {
     const container = getContainer(imageGalleryElement);
     if (!container) {
         return;
@@ -52,6 +56,7 @@ function addImages(images, imageGalleryElement) {
 
     const lastImage = getImages(imageGalleryElement).at(-1);
     let lastIndex = lastImage ? getIndex(lastImage) : -1;
+    const imagePromises = [];
     for (const image of images) {
         image.classList.add(
             "d-block",
@@ -62,9 +67,28 @@ function addImages(images, imageGalleryElement) {
             "object-fit-cover"
         );
         image.dataset.index = ++lastIndex;
-        // TODO: Change mimetype
+        imagePromises.push(transformImageToWebp(image));
+    }
+    await Promise.all(imagePromises);
+    if (images.length > 0) {
+        relayout(imageGalleryElement);
+    }
+}
+
+async function transformImageToWebp(image) {
+    await loadImageInfo(image);
+    if (
+        image.dataset.mimetype &&
+        !["image/gif", "image/svg+xml", "image/webp"].includes(image.dataset.mimetype)
+    ) {
+        // Convert to webp but keep original width.
+        image.dataset.mimetype = "image/webp";
+        const src = await applyModifications(image, {
+            mimetype: "image/webp",
+        });
+        image.src = src;
+        image.classList.add("o_modified_image_to_save");
     }
-    relayout(imageGalleryElement);
 }
 
 /**

diff --git a/addons/html_builder/static/tests/options/image_gallery.test.js b/addons/html_builder/static/tests/options/image_gallery.test.js
@@ -9,7 +9,7 @@ const base64Img =
     "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA\n        AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO\n            9TXL0Y4OHwAAAABJRU5ErkJggg==";
 
 test("Add image in gallery", async () => {
-    onRpc("/web/dataset/call_kw/ir.attachment/search_read", (test) => [
+    onRpc("/web/dataset/call_kw/ir.attachment/search_read", () => [
         {
             id: 1,
             name: "logo",
@@ -19,6 +19,12 @@ test("Add image in gallery", async () => {
             public: true,
         },
     ]);
+
+    onRpc("/html_editor/get_image_info", () => {
+        expect.step("get_image_info");
+        return {};
+    });
+
     await setupWebsiteBuilder(
         `
         <section class="s_image_gallery o_masonry" data-columns="2">
@@ -43,12 +49,13 @@ test("Add image in gallery", async () => {
     await click("img.o_we_attachment_highlight");
     await animationFrame();
     await click(".modal-footer button");
-    await waitFor(":iframe img[data-index='6']");
+    await waitFor(":iframe .o_masonry_col img[data-index='6']");
 
     const columns = queryAll(":iframe .o_masonry_col");
     const columnImgs = columns.map((column) =>
         [...column.children].map((img) => img.dataset.index)
     );
 
     expect(columnImgs).toEqual([["1", "3", "4", "5", "6"], ["2"]]);
+    expect.verifySteps(["get_image_info"]);
 });