[IMP] website: review gallery snippet

Review the gallery snippet. It has been improved in multiple ways.
Added new options, etc.

Part of https://github.com/odoo/odoo/pull/45096
task-2162952

8 files changed, 346 insertions, 104 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 48afbe0db65..36852683ad3 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -441,6 +441,7 @@ registry.slider = publicWidget.Widget.extend({
         this._computeHeights();
         // Initialize carousel and pause if in edit mode.
         this.$target.carousel(this.editableMode ? 'pause' : undefined);
+        $(window).on('resize.slider', _.debounce(() => this._computeHeights(), 250));
         return this._super.apply(this, arguments);
     },
     /**
@@ -454,6 +455,7 @@ registry.slider = publicWidget.Widget.extend({
         _.each(this.$('.carousel-item'), function (el) {
             $(el).css('min-height', '');
         });
+        $(window).off('.slider');
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
index 19e98a7b341..7d1ee4ea386 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -7,7 +7,7 @@ var publicWidget = require('web.public.widget');
 var qweb = core.qweb;
 
 const GalleryWidget = publicWidget.Widget.extend({
-    selector: '.o_gallery:not(.o_slideshow)',
+    selector: '.s_image_gallery:not(.o_slideshow)',
     xmlDependencies: ['/website/static/src/xml/website.gallery.xml'],
     events: {
         'click img': '_onClickImg',
@@ -28,9 +28,7 @@ const GalleryWidget = publicWidget.Widget.extend({
         var self = this;
         var $cur = $(ev.currentTarget);
 
-        var milliseconds = undefined;
-        var params = undefined;
-        var $images = $cur.closest('.o_gallery').find('img');
+        var $images = $cur.closest('.s_image_gallery').find('img');
         var size = 0.8;
         var dimensions = {
             min_width: Math.round(window.innerWidth * size * 0.9),
@@ -43,7 +41,7 @@ const GalleryWidget = publicWidget.Widget.extend({
 
         var $img = ($cur.is('img') === true) ? $cur : $cur.closest('img');
 
-        milliseconds = $cur.closest('.o_gallery').data('interval') || false;
+        const milliseconds = $cur.closest('.s_image_gallery').data('interval') || false;
         var $modal = $(qweb.render('website.gallery.slideshow.lightbox', {
             images: $images.get(),
             index: $images.index($img),
diff --git a/addons/website/static/src/snippets/s_image_gallery/000.scss b/addons/website/static/src/snippets/s_image_gallery/000.scss
index 9b5274f6673..a99bc86fcd2 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.scss
+++ b/addons/website/static/src/snippets/s_image_gallery/000.scss
@@ -1,5 +1,5 @@
 
-.o_gallery {
+.o_gallery:not([data-vcss]) {
     &.o_grid, &.o_masonry {
         .img {
             width: 100%;
@@ -95,14 +95,6 @@
         > div:first-child {
             height: 100%;
         }
-    }
-    .carousel-inner .item img {
-        max-width: none;
-    }
-}
-.o_gallery,
-.modal-body {
-    &.o_slideshow {
         .carousel {
             height: 100%;
 
@@ -154,4 +146,10 @@
             }
         }
     }
+    .carousel-inner .item img {
+        max-width: none;
+    }
 }
+
+// Note: the s_gallery_lightbox is always using the right dom and classes of the
+// most recent version of the snippet as it is generated by JS after page load.
diff --git a/addons/website/static/src/snippets/s_image_gallery/001.scss b/addons/website/static/src/snippets/s_image_gallery/001.scss
new file mode 100644
index 00000000000..ef28b5c6d0a
--- /dev/null
+++ b/addons/website/static/src/snippets/s_image_gallery/001.scss
@@ -0,0 +1,245 @@
+
+.s_image_gallery[data-vcss="001"] {
+    &.o_grid, &.o_masonry {
+        .img {
+            width: 100%;
+        }
+    }
+    &.o_grid {
+        &.o_spc-none div.row {
+            margin-bottom: 0px;
+        }
+        &.o_spc-small div.row > div {
+            margin-bottom: $spacer;
+        }
+        &.o_spc-medium div.row > div {
+            margin-bottom: $spacer * 2;
+        }
+        &.o_spc-big div.row > div {
+            margin-bottom: $spacer * 3;
+        }
+    }
+    &.o_masonry {
+        &.o_spc-none div.o_masonry_col {
+            padding: 0;
+            > img {
+                margin: 0 !important;
+            }
+        }
+        &.o_spc-small div.o_masonry_col {
+            padding: 0 ($spacer * .5);
+            > img {
+                margin-bottom: $spacer !important;
+            }
+        }
+        &.o_spc-medium div.o_masonry_col {
+            padding: 0 $spacer;
+            > img {
+                margin-bottom: $spacer * 2 !important;
+            }
+        }
+        &.o_spc-big div.o_masonry_col {
+            padding: 0 ($spacer * 1.5);
+            > img {
+                margin-bottom: $spacer * 3 !important;
+            }
+        }
+    }
+    &.o_nomode {
+        &.o_spc-none .row div {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+        &.o_spc-small .row div {
+            padding-top: $spacer * .5;
+            padding-bottom: $spacer * .5;
+        }
+        &.o_spc-medium .row div {
+            padding-top: $spacer;
+            padding-bottom: $spacer;
+        }
+        &.o_spc-big .row div {
+            padding-top: $spacer * 1.5;
+            padding-bottom: $spacer * 1.5;
+        }
+    }
+    &:not(.o_slideshow) {
+        img {
+            cursor: pointer;
+        }
+    }
+    &.o_slideshow {
+        .carousel {
+            .carousel-item.active,
+            .carousel-item-next,
+            .carousel-item-prev,
+            .carousel-control-next,
+            .carousel-control-prev {
+                padding-bottom: 64px;
+            }
+            ul.carousel-indicators li {
+                border: 1px solid #aaa;
+            }
+        }
+        ul.carousel-indicators {
+            position: absolute;
+            left: 0%;
+            bottom: 0;
+            width: 100%;
+            height: auto;
+            margin-left: 0;
+            padding: 0;
+            border-width: 0;
+            > * {
+                list-style-image: none;
+                display: inline-block;
+                width: 40px;
+                height: 40px;
+                line-height: 40px;
+                margin: 2.5px 2.5px 2.5px 2.5px;
+                padding: 0;
+                border: 1px solid #aaa;
+                text-indent: initial;
+                background-size: cover;
+                background-color: #fff;
+                background-position: center;
+                border-radius: 0;
+                vertical-align: bottom;
+                flex: 0 0 40px;
+                &:not(.active) {
+                    opacity: 0.8;
+                    filter: grayscale(1);
+                }
+            }
+        }
+        > .container, > .container-fluid, > .o_container_small {
+            height: 100%;
+        }
+        &.s_image_gallery_cover .carousel-item > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        &:not(.s_image_gallery_show_indicators) .carousel {
+            ul.carousel-indicators {
+                display: none;
+            }
+            .carousel-item.active,
+            .carousel-item-next,
+            .carousel-item-prev,
+            .carousel-control-next,
+            .carousel-control-prev {
+                padding-bottom: 0px;
+            }
+        }
+        &.s_image_gallery_indicators_arrows_boxed, &.s_image_gallery_indicators_arrows_rounded {
+            .carousel {
+                .carousel-control-prev .fa,
+                .carousel-control-next .fa {
+                    text-shadow: none;
+                }
+            }
+        }
+        &.s_image_gallery_indicators_arrows_boxed {
+            .carousel {
+                .carousel-control-prev .fa:before {
+                    content: "\f104";
+                    padding-right: 2px;
+                }
+                .carousel-control-next .fa:before {
+                    content: "\f105";
+                    padding-left: 2px;
+                }
+                .carousel-control-prev .fa:before,
+                .carousel-control-next .fa:before {
+                    display: block;
+                    width: 3rem;
+                    height: 3rem;
+                    line-height: 3rem;
+                    color: black;
+                    background: white;
+                    font-size: 1.25rem;
+                    border: 1px solid $gray-500;
+                }
+            }
+        }
+        &.s_image_gallery_indicators_arrows_rounded {
+            .carousel {
+                .carousel-control-prev .fa:before { content: "\f060"; }
+                .carousel-control-next .fa:before { content: "\f061"; }
+                .carousel-control-prev .fa:before,
+                .carousel-control-next .fa:before {
+                    color: black;
+                    background: white;
+                    font-size: 1.25rem;
+                    border-radius: 50%;
+                    padding: 1.25rem;
+                    border: 1px solid $gray-500;
+                }
+            }
+        }
+        &.s_image_gallery_indicators_rounded {
+            .carousel {
+                ul.carousel-indicators li {
+                    border-radius: 50%;
+                }
+            }
+        }
+
+        @extend %image-gallery-slideshow-styles;
+    }
+    .carousel-inner .item img {
+        max-width: none;
+    }
+}
+
+.s_gallery_lightbox {
+    .close {
+        font-size: 2rem;
+    }
+    .modal-dialog {
+        height: 100%;
+        background-color: rgba(0,0,0,0.7);
+    }
+    @include media-breakpoint-up(sm) {
+        .modal-dialog {
+            max-width: 100%;
+            padding: 0;
+        }
+    }
+    ul.carousel-indicators {
+        display: none;
+    }
+
+    .modal-body.o_slideshow {
+        @extend %image-gallery-slideshow-styles;
+    }
+}
+
+%image-gallery-slideshow-styles {
+    &:not(.s_image_gallery_cover) .carousel-item > img {
+        max-height: 100%;
+        max-width: 100%;
+        margin: auto;
+    }
+    .carousel {
+        height: 100%;
+
+        .carousel-inner {
+            height: 100%;
+        }
+        .carousel-item.active,
+        .carousel-item-next,
+        .carousel-item-prev,
+        .carousel-control-next,
+        .carousel-control-prev {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+        .carousel-control-next .fa,
+        .carousel-control-prev .fa {
+            text-shadow: 0px 0px 3px $gray-800;
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_image_gallery/options.js b/addons/website/static/src/snippets/s_image_gallery/options.js
index 6ce339b2d77..5a1f0c01d1b 100644
--- a/addons/website/static/src/snippets/s_image_gallery/options.js
+++ b/addons/website/static/src/snippets/s_image_gallery/options.js
@@ -46,7 +46,8 @@ options.registry.gallery = options.Class.extend({
             }
         });
 
-        if (this.$('> div:first-child > *:not(div)').length) {
+        const $container = this.$('> .container, > .container-fluid, > .o_container_small');
+        if ($container.find('> *:not(div)').length) {
             self.mode(null, self.getMode());
         }
 
@@ -56,6 +57,8 @@ options.registry.gallery = options.Class.extend({
      * @override
      */
     onBuilt: function () {
+        this.addImages(false);
+        // TODO should consider the async parts
         this._adaptNavigationIDs();
     },
     /**
@@ -83,7 +86,8 @@ options.registry.gallery = options.Class.extend({
      * @see this.selectClass for parameters
      */
     addImages: function (previewMode) {
-        var $container = this.$('> div:first-child');
+        const $images = this.$('img');
+        var $container = this.$('> .container, > .container-fluid, > .o_container_small');
         var dialog = new weWidgets.MediaDialog(this, {multiImages: true, onlyImages: true, mediaWidth: 1920});
         var lastImage = _.last(this._getImages());
         var index = lastImage ? this._getIndex(lastImage) : -1;
@@ -91,14 +95,18 @@ options.registry.gallery = options.Class.extend({
             dialog.on('save', this, function (attachments) {
                 for (var i = 0; i < attachments.length; i++) {
                     $('<img/>', {
-                        class: 'img img-fluid',
+                        class: $images.length > 0 ? $images[0].className : 'img img-fluid d-block ',
                         src: attachments[i].image_src,
                         'data-index': ++index,
                         alt: attachments[i].description || '',
+                        'data-name': _t('Image'),
+                        style: $images.length > 0 ? $images[0].style.cssText : '',
                     }).appendTo($container);
                 }
-                this.mode('reset', this.getMode());
-                this.trigger_up('cover_update');
+                if (attachments.length > 0) {
+                    this.mode('reset', this.getMode());
+                    this.trigger_up('cover_update');
+                }
             });
             dialog.on('closed', this, () => resolve());
             dialog.open();
@@ -139,7 +147,7 @@ options.registry.gallery = options.Class.extend({
      */
     grid: function () {
         var imgs = this._getImages();
-        var $row = $('<div/>', {class: 'row'});
+        var $row = $('<div/>', {class: 'row s_nb_column_fixed'});
         var columns = this._getColumns();
         var colClass = 'col-lg-' + (12 / columns);
         var $container = this._replaceContent($row);
@@ -149,20 +157,13 @@ options.registry.gallery = options.Class.extend({
             var $col = $('<div/>', {class: colClass});
             $col.append($img).appendTo($row);
             if ((index + 1) % columns === 0) {
-                $row = $('<div/>', {class: 'row'});
+                $row = $('<div/>', {class: 'row s_nb_column_fixed'});
                 $row.appendTo($container);
             }
         });
         this.$target.css('height', '');
     },
     /**
-     * Allows to changes the interval of automatic slideshow (not active in
-     * edit mode).
-     */
-    interval: function (previewMode, widgetValue) {
-        this.$target.find('.carousel:first').attr('data-interval', widgetValue || '0');
-    },
-    /**
      * Displays the images with the "masonry" layout.
      */
     masonry: function () {
@@ -172,12 +173,12 @@ options.registry.gallery = options.Class.extend({
         var colClass = 'col-lg-' + (12 / columns);
         var cols = [];
 
-        var $row = $('<div/>', {class: 'row'});
+        var $row = $('<div/>', {class: 'row s_nb_column_fixed'});
         this._replaceContent($row);
 
         // Create columns
         for (var c = 0; c < columns; c++) {
-            var $col = $('<div/>', {class: 'col o_snippet_not_selectable ' + colClass});
+            var $col = $('<div/>', {class: 'o_masonry_col o_snippet_not_selectable ' + colClass});
             $row.append($col);
             cols.push($col[0]);
         }
@@ -216,7 +217,7 @@ options.registry.gallery = options.Class.extend({
      * Displays the images with the standard layout: floating images.
      */
     nomode: function () {
-        var $row = $('<div/>', {class: 'row'});
+        var $row = $('<div/>', {class: 'row s_nb_column_fixed'});
         var imgs = this._getImages();
 
         this._replaceContent($row);
@@ -254,8 +255,10 @@ options.registry.gallery = options.Class.extend({
      * Displays the images with a "slideshow" layout.
      */
     slideshow: function () {
-        var imgStyle = this.$el.find('.active[data-styling]').data('styling') || '';
-        var images = _.map(this._getImages(), img => ({
+        const imageEls = this._getImages();
+        const images = _.map(imageEls, img => ({
+            // Use getAttribute to get the attribute value otherwise .src
+            // returns the absolute url.
             src: img.getAttribute('src'),
             alt: img.getAttribute('alt'),
         }));
@@ -264,9 +267,10 @@ options.registry.gallery = options.Class.extend({
             images: images,
             index: 0,
             title: "",
-            interval: currentInterval || this.$target.data('interval') || 0,
+            interval: currentInterval || 0,
             id: 'slideshow_' + new Date().getTime(),
-            userStyle: imgStyle,
+            attrClass: imageEls.length > 0 ? imageEls[0].className : '',
+            attrStyle: imageEls.length > 0 ? imageEls[0].style.cssText : '',
         },
         $slideshow = $(qweb.render('website.gallery.slideshow', params));
         this._replaceContent($slideshow);
@@ -279,17 +283,6 @@ options.registry.gallery = options.Class.extend({
         this.$target.off('slide.bs.carousel').off('slid.bs.carousel');
         this.$('li.fa').off('click');
     },
-    /**
-     * Allows to change the style of the individual images.
-     *
-     * @see this.selectClass for parameters
-     */
-    styling: function (previewMode, value) {
-        var classes = _.map(this.$el.find('[data-styling]'), function (el) {
-            return $(el).data('styling');
-        }).join(' ');
-        this.$('img').removeClass(classes).addClass(value);
-    },
 
     //--------------------------------------------------------------------------
     // Public
@@ -368,25 +361,9 @@ options.registry.gallery = options.Class.extend({
                 this.activeMode = activeModeName;
                 return activeModeName;
             }
-            case 'interval': {
-                const carousel = this.$target[0].querySelector('.carousel');
-                return (carousel && carousel.dataset.interval || '0');
-            }
             case 'columns': {
                 return `${this._getColumns()}`;
             }
-            case 'styling': {
-                const img = this.$target[0].querySelector('img');
-                if (!img) {
-                    return '';
-                }
-                for (const className of params.possibleValues) {
-                    if (className && img.classList.contains(className)) {
-                        return className;
-                    }
-                }
-                return '';
-            }
         }
         return this._super(...arguments);
     },
@@ -431,7 +408,7 @@ options.registry.gallery = options.Class.extend({
      * @returns {jQuery} the main container of the snippet
      */
     _replaceContent: function ($content) {
-        var $container = this.$('> div:first-child');
+        var $container = this.$('> .container, > .container-fluid, > .o_container_small');
         $container.empty().append($content);
         return $container;
     },
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 23bcf471eb2..079a14c731d 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -13,8 +13,8 @@
         <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
             <div class="carousel-inner" style="padding: 0;">
                  <t t-foreach="images" t-as="image">
-                    <div t-attf-class="carousel-item #{image_index == index and 'active' or ''}">
-                        <img t-attf-class="img img-fluid d-block #{userStyle}" t-att-src="image.src" t-att-alt="image.alt"/>
+                    <div t-attf-class="carousel-item #{image_index == index and 'active' or None}">
+                        <img t-attf-class="#{attrClass || 'img img-fluid d-block'}" t-att-src="image.src" t-att-style="attrStyle" t-att-alt="image.alt" data-name="Image"/>
                     </div>
                  </t>
             </div>
@@ -24,15 +24,21 @@
                     <i class="fa fa-chevron-left"/>
                 </li>
                 <t t-foreach="images" t-as="image">
-                    <li t-attf-data-target="##{id}" t-att-data-slide-to="image_index" t-att-class="image_index == index and 'active'" t-attf-style="background-image: url(#{image.src})"></li>
+                    <li t-attf-data-target="##{id}" t-att-data-slide-to="image_index" t-att-class="image_index == index and 'active' or None" t-attf-style="background-image: url(#{image.src})"></li>
                 </t>
                 <li class="o_indicators_right text-center" aria-label="Next" title="Next">
                     <i class="fa fa-chevron-right"/>
                 </li>
             </ul>
 
-            <a class="carousel-control-prev text-black" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a>
-            <a class="carousel-control-next text-black" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a>
+            <a class="carousel-control-prev" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous">
+                <span class="fa fa-chevron-left fa-2x text-white"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next">
+                <span class="fa fa-chevron-right fa-2x text-white"></span>
+                <span class="sr-only">Next</span>
+            </a>
         </div>
     </t>
 
@@ -47,15 +53,14 @@
         ========================================================================
     -->
     <t t-name="website.gallery.slideshow.lightbox">
-        <div role="dialog" class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog">
-            <div class="modal-dialog modal-lg" role="Picture Gallery"
-                t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;">
-                <div class="modal-content">
-                    <main class="modal-body o_slideshow">
-                        <button type="button" class="close" data-dismiss="modal" style="position: absolute; right: 12px; top: 10px;"><span role="img" aria-label="Close">&amp;times;</span><span class="sr-only">Close</span></button>
+        <div role="dialog" class="modal o_technical_modal fade s_gallery_lightbox p-0" aria-labbelledby="Image Gallery Dialog">
+            <div class="modal-dialog m-0" role="Picture Gallery"
+                t-attf-style="">
+                <div class="modal-content bg-transparent">
+                    <main class="modal-body o_slideshow bg-transparent">
+                        <button type="button" class="close text-white" data-dismiss="modal" style="position: absolute; right: 10px; top: 10px;"><span role="img" aria-label="Close">&amp;times;</span><span class="sr-only">Close</span></button>
                         <t t-call="website.gallery.slideshow"></t>
                     </main>
-
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index 8d1a3190942..fbb4350517b 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_image_gallery" name="Image Gallery">
-    <section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
+<template id="s_image_gallery" name="Gallery">
+    <section class="s_image_gallery o_spc-medium o_slideshow s_image_gallery_show_indicators s_nb_column_fixed s_image_gallery_indicators_rounded pt24"
+             data-vcss="001"
+             data-columns="3" style="height: 500px; overflow: hidden;">
         <div class="container">
             <div class="alert alert-info css_editable_mode_display text-center" role="status"><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div>
         </div>
@@ -11,24 +13,18 @@
 
 <template id="s_image_gallery_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
-        <div data-js="gallery" data-selector=".o_gallery">
-            <we-button data-add-images="true" data-no-preview="true">Add images</we-button>
-            <we-button data-remove-all-images="true" data-no-preview="true">Remove all images</we-button>
-            <we-divider/>
+        <div data-js="gallery" data-selector=".s_image_gallery">
             <we-select string="Mode">
-                <we-button data-mode="nomode">Float</we-button>
-                <we-button data-mode="masonry" data-name="masonry_mode_opt">Masonry</we-button>
                 <we-button data-mode="grid" data-name="grid_mode_opt">Grid</we-button>
+                <we-button data-mode="masonry" data-name="masonry_mode_opt">Masonry</we-button>
+                <we-button data-mode="nomode">Float</we-button>
                 <we-button data-mode="slideshow" data-name="slideshow_mode_opt">Slideshow</we-button>
             </we-select>
-            <we-select string="Slideshow speed" data-dependencies="slideshow_mode_opt">
-                <we-button data-interval="1000">1s</we-button>
-                <we-button data-interval="2000">2s</we-button>
-                <we-button data-interval="3000">3s</we-button>
-                <we-button data-interval="5000">5s</we-button>
-                <we-button data-interval="10000">10s</we-button>
-                <we-button data-interval="0">Disable autoplay</we-button>
-            </we-select>
+            <we-input string="Speed"
+                  data-dependencies="slideshow_mode_opt"
+                  data-apply-to=".carousel:first"
+                  data-select-data-attribute="0s" data-attribute-name="interval"
+                  data-unit="s" data-save-unit="ms" data-step="0.1"/>
             <we-select string="Columns" data-dependencies="masonry_mode_opt, grid_mode_opt">
                 <we-button data-columns="1">1</we-button>
                 <we-button data-columns="2">2</we-button>
@@ -43,15 +39,29 @@
                 <we-button data-select-class="o_spc-medium">Medium</we-button>
                 <we-button data-select-class="o_spc-big">Big</we-button>
             </we-select>
-            <we-select string="Styling">
-                <we-button data-styling="">Square</we-button>
-                <we-button data-styling="rounded">Rounded corners</we-button>
-                <we-button data-styling="img-thumbnail">Thumbnails</we-button>
-                <we-button data-styling="rounded-circle">Circle</we-button>
-                <we-button data-styling="shadow">Shadows</we-button>
+            <we-select string="Styling" data-apply-to="img">
+                <we-button data-select-class="">Standard</we-button>
+                <we-button data-select-class="img-thumbnail">Thumbnails</we-button>
+                <we-button data-select-class="rounded-pill">Circle</we-button>
+                <we-button data-select-class="shadow">Shadows</we-button>
             </we-select>
+            <we-select string="Arrows" data-dependencies="slideshow_mode_opt">
+                <we-button data-select-class="">Standard</we-button>
+                <we-button data-select-class="s_image_gallery_indicators_arrows_boxed">Boxed</we-button>
+                <we-button data-select-class="s_image_gallery_indicators_arrows_rounded">Rounded</we-button>
+            </we-select>
+            <we-checkbox string="Image Cover" data-select-class="s_image_gallery_cover" data-dependencies="slideshow_mode_opt"/>
+            <we-checkbox string="Show Indicators" data-select-class="s_image_gallery_show_indicators" data-dependencies="slideshow_mode_opt"/>
+            <we-checkbox string="Rounded Indicators" data-select-class="s_image_gallery_indicators_rounded" data-dependencies="slideshow_mode_opt"/>
+            <t t-call="website.snippet_options_border_widgets">
+                <t t-set="apply_to" t-valuef="img"/>
+                <t t-set="so_rounded_no_dependencies" t-value="true"/>
+            </t>
+            <we-divider/>
+            <we-button data-add-images="true" data-no-preview="true">Add images<i class="fa fa-fw fa-plus ml-auto"/></we-button>
+            <we-button data-remove-all-images="true" data-no-preview="true">Remove all images<i class="fa fa-fw fa-minus ml-auto"/></we-button>
         </div>
-        <div data-js="gallery_img" data-selector=".o_gallery img">
+        <div data-js="gallery_img" data-selector=".s_image_gallery img">
             <div data-no-preview="true">
                 <we-title>Re-order</we-title>
                 <we-button data-position="first">Move to first</we-button>
@@ -63,12 +73,18 @@
     </xpath>
 </template>
 
-<template id="assets_snippet_s_image_gallery_css_000" inherit_id="website.assets_frontend">
+<template id="assets_snippet_s_image_gallery_css_000" inherit_id="website.assets_frontend" active="False">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_image_gallery/000.scss"/>
     </xpath>
 </template>
 
+<template id="assets_snippet_s_image_gallery_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_image_gallery/001.scss"/>
+    </xpath>
+</template>
+
 <template id="assets_snippet_s_image_gallery_js_000" inherit_id="website.assets_frontend">
     <xpath expr="//script[last()]" position="after">
         <script type="text/javascript" src="/website/static/src/snippets/s_image_gallery/000.js"/>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 3bde97b34e4..e1460a0771f 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -149,7 +149,8 @@
         <t t-set="with_bs_class" t-value="True"/>
     </t>
     <we-input string="Round Corners"
-              data-dependencies="border_width_opt,bg_color_opt"
+              t-att-data-apply-to="apply_to"
+              t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
               data-select-style="0" data-css-property="border-radius"
               data-unit="px" data-extra-class="rounded"/>
 </template>
@@ -297,14 +298,14 @@
 
     <!-- Background -->
     <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight'"/>
-    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .o_gallery .row > div'"/>
+    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .s_image_gallery .row > div'"/>
 
     <t t-set="base_only_bg_image_selector" t-value="'.parallax, .s_tabs .oe_structure > *, footer .oe_structure > *'"/>
     <t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>
     <t t-set="only_bg_image_exclude" t-value="''"/>
 
     <t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div'"/>
-    <t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .o_gallery .carousel-item'"/>
+    <t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item'"/>
 
     <t t-call="web_editor.snippet_options_background_options">
         <t t-set="selector" t-value="both_bg_color_image_selector"/>
@@ -352,14 +353,14 @@
     <!-- Border | Columns -->
     <div data-js="Box"
          data-selector="section .row > div"
-         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
+         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div">
         <t t-call="website.snippet_options_border_widgets"/>
         <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <div data-js="sizing_y"
         data-selector="section, .row > div, .parallax, .s_hr, .carousel-item, .s_rating"
-        data-exclude="section:has(> .carousel), .o_gallery .carousel-item, .s_col_no_resize.row > div"/>
+        data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div"/>
 
     <div data-js="sizing_x"
         data-selector=".row > div"