[IMP] web, web_editor, *: add media image optimize dialog

* = website, website_blog

The goal is to give the user an opportunity to optimize his images before using
them.

For this we introduce a preview/configuration dialog after every image upload,
where appropriate default values are filled for the quality and resolution,
based on where the image is going to be used. Since this is not going to be
perfect all the time, we still allow the user to configure them, and we display
a preview to ease this process.

Indeed it is important for SEO and for usability in general that the images are
as light as possible in size.

Technically the original image is uploaded and saved first, and then it can be
optimized. This way the upload only happens once, and the preview can be
computed from the already saved image.

task-1930726
PR: #31208

1 files changed, 64 insertions, 7 deletions

diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index a9e42a88231..abd2e940824 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -111,7 +111,6 @@
     <t t-name="wysiwyg.widgets.files.submenu">
         <div class="form-inline align-items-center py-4">
             <input type="file" class="d-none o_file_input" name="upload" t-att-accept="widget.options.accept" t-att-multiple="widget.options.multiImages &amp;&amp; 'multiple'"/>
-            <input type="hidden" name="disable_optimization" value=""/>
 
             <div class="btn-group">
                 <button type="button" class="btn btn-primary o_upload_media_button">
@@ -145,13 +144,11 @@
             <t t-set="addText">Add image</t>
             <t t-set="searchPlaceholder">Search an image</t>
             <t t-set="urlWarningTitle">The URL does not contain any image. The file will be added in the document section.</t>
-            <t t-set="alternateUpload">
-                <button class="btn btn-primary dropdown-toggle dropdown-toggle-split o_media_optimization" data-toggle="dropdown" type="button">
-                    <span class="sr-only">Alternate Upload</span>
+            <t t-if="widget.options.showQuickUpload" t-set="alternateUpload">
+                <button class="btn btn-primary o_we_quick_upload" type="button" title="Quick Upload">
+                    <i class="fa fa-fast-forward"/>
+                    <span class="sr-only">Quick Upload</span>
                 </button>
-                <div class="dropdown-menu" role="menu">
-                    <button type="button" role="menuitem" class="dropdown-item o_upload_media_button_no_optimization">Upload image without optimization</button>
-                </div>
             </t>
         </t>
     </t>
@@ -186,6 +183,65 @@
         </div>
     </t>
 
+    <t t-name="wysiwyg.widgets.image.optimize">
+        <form class="o_we_image_optimize_dialog">
+            <div class="row">
+                <div class="o_we_config_column col-lg-6">
+                    <div class="form-group">
+                        <label class="o_we_title_label" for="o_we_name_input">Name</label>
+                        <input type="text" class="form-control" id="o_we_name_input" name="filename" aria-describedby="nameHelp" t-att-value="widget.attachment.name" required="required"/>
+                        <small id="nameHelp" class="form-text text-muted">Give a relevant name to your file to optimize search engine results.</small>
+                    </div>
+
+                    <small t-if="widget.disableResize" class="form-text text-muted o_we_no_resize"><span class="fa fa-info-circle"/> Resizing is not supported for images of type <t t-esc="widget.attachment.mimetype"/>.</small>
+                    <div class="form-group" t-else="1">
+                        <div>
+                            <div class="btn-group btn-group-sm mt-2" role="group" aria-label="Sizes">
+                                <t t-foreach="widget.suggestedWidths" t-as="suggestedWidth">
+                                    <button t-attf-class="btn btn-link o_we_width_preset #{suggestedWidth.width === widget.attachment.image_width ? ' active' : ''}" t-att-data-width="suggestedWidth.width" t-esc="suggestedWidth.text"/>
+                                </t>
+                            </div>
+                        </div>
+                        <label class="o_we_title_label" for="o_we_width">Width (in px)</label>
+                        <input type="number" class="form-control" id="o_we_width" name="width" aria-describedby="sizeHelp" min="1" t-att-max="widget.attachment.image_width" t-att-value="widget.defaultWidth"/>
+                        <label class="o_we_title_label" for="o_we_height">Height (in px)</label>
+                        <input type="number" class="form-control" id="o_we_height" name="height" aria-describedby="sizeHelp" min="1" t-att-max="widget.attachment.image_height" t-att-value="widget.defaultHeight"/>
+                        <small id="sizeHelp" class="form-text text-muted">Reduce the size as much as possible to increase performance.</small>
+                    </div>
+
+                    <small t-if="widget.disableQuality" class="form-text text-muted o_we_no_quality"><span class="fa fa-info-circle"/> Changing the quality is not supported for images of type <t t-esc="widget.attachment.mimetype"/>.</small>
+                    <div class="form-group" t-else="1">
+                        <t t-if="widget.toggleQuality">
+                            <div class="custom-control custom-switch">
+                                <input type="checkbox" class="custom-control-input" id="o_we_optimize_quality" t-att-checked="widget.isExisting ? undefined : 'checked'" aria-describedby="toggleQualityHelp"/>
+                                <label class="custom-control-label" for="o_we_optimize_quality">Optimize</label>
+                            </div>
+                            <small id="toggleQualityHelp" class="form-text text-muted">This reduces the quality to increase performance.</small>
+                        </t>
+                        <t t-else="1">
+                            <label class="o_we_title_label" for="o_we_quality_input">Quality</label>
+                            <div class="form-row">
+                                <div class="col-sm-10">
+                                    <input type="range" class="custom-range o_we_quality_range" id="quality_range" name="quality_range" min="1" max="100" step="1" aria-describedby="rangeQualityHelp" t-att-value="widget.defaultQuality"/>
+                                </div>
+                                <div class="col-sm-2">
+                                    <input type="number" class="form-control" id="o_we_quality_input" name="quality" min="1" max="100" step="1" aria-describedby="rangeQualityHelp" t-att-value="widget.defaultQuality"/>
+                                </div>
+                            </div>
+                            <small id="rangeQualityHelp" class="form-text text-muted">Reduce the quality as much as possible to increase performance.</small>
+                        </t>
+                    </div>
+                </div>
+                <div class="o_we_preview_column col-lg-6">
+                    <h4>Preview with the current settings</h4>
+                    <div class="mw-100 o_we_preview_area">
+                        <img class="img o_we_preview_image" alt="Image Preview"/>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </t>
+
     <t t-name="wysiwyg.widgets.image.existing.attachments">
         <div class="o_we_images">
             <ol class="existing-attachments d-flex flex-wrap mx-auto my-0 p-2">
@@ -198,6 +254,7 @@
 
     <t t-name="wysiwyg.widgets.image.existing.attachment">
         <li class="o_existing_attachment_cell position-relative m-2" t-att-data-id="attachment.id">
+            <i t-if="!attachment.url" class="fa fa-cog o_existing_attachment_optimize p-2" title="Optimize" role="img" aria-label="Optimize"/>
             <t t-call="wysiwyg.widgets.file.existing.remove"/>
             <div t-attf-class="d-flex align-items-center h-100">
                 <img class="img img-fluid o_we_attachment_highlight" t-att-src="attachment.image_src + '?width=256&amp;height=192'" t-att-alt="attachment.name" t-att-title="attachment.name"/>