diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 548172fd0a1..6b4c5414fe1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -782,43 +782,25 @@ options.registry.OptionsTab = options.Class.extend({
});
},
/**
- * @todo use scss customization instead (like for user colors)
* @see this.selectClass for parameters
*/
- async customizeBodyBg(previewMode, widgetValue, params) {
- const xmlID = 'website.option_custom_body_image';
- if (widgetValue) {
- await this._rpc({
- model: 'ir.model.data',
- method: 'get_object_reference',
- args: xmlID.split('.'),
- }).then(data => {
- return this._rpc({
- model: 'ir.ui.view',
- method: 'save',
- args: [
- data[1],
- `#wrapwrap { background-image: url("${widgetValue}"); }`,
- '//style',
- ],
- });
- });
- } else {
- await this._customizeWebsiteViews('', {possibleValues: ['', xmlID]});
+ async customizeBodyBgType(previewMode, widgetValue, params) {
+ if (widgetValue === 'NONE') {
+ this.bodyImageType = 'image';
+ return this.customizeBodyBg(previewMode, '', params);
}
-
- await this._reloadBundles();
+ // TODO improve: hack to click on external image picker
+ this.bodyImageType = widgetValue;
+ const widget = this._requestUserValueWidgets(params.imagepicker)[0];
+ widget.$el.click();
},
/**
- * @see this.selectClass for parameters
+ * @override
*/
- async enableImagepicker(previewMode, widgetValue, params) {
- if (widgetValue) {
- // TODO improve: here we make a hack so that a hidden imagepicker
- // widget opens...
- const widget = this._requestUserValueWidgets(widgetValue)[0];
- widget.$el.click();
- }
+ async customizeBodyBg(previewMode, widgetValue, params) {
+ // TODO improve: customize two variables at the same time...
+ await this.customizeWebsiteVariable(previewMode, this.bodyImageType, {variable: 'body-image-type'});
+ await this.customizeWebsiteVariable(previewMode, widgetValue ? `'${widgetValue}'` : '', {variable: 'body-image'});
},
/**
* @see this.selectClass for parameters
@@ -940,10 +922,12 @@ options.registry.OptionsTab = options.Class.extend({
* @override
*/
async _computeWidgetState(methodName, params) {
- if (methodName === 'customizeBodyBg') {
- const bgURL = $('#wrapwrap').css('background-image');
- const srcValueWrapper = /url\(['"]*|['"]*\)|^none$/g;
- return bgURL && bgURL.replace(srcValueWrapper, '') || '';
+ if (methodName === 'customizeBodyBgType') {
+ const bgImage = $('#wrapwrap').css('background-image');
+ if (bgImage === 'none') {
+ return "NONE";
+ }
+ return weUtils.getCSSVariableValue('body-image-type');
}
return this._super(...arguments);
},
diff --git a/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss b/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss
deleted file mode 100644
index 1e75db342be..00000000000
--- a/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-#wrapwrap {
- background-size: auto;
- background-repeat: repeat;
-}
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 3351c9da5ec..c4c6d80a446 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -244,6 +244,9 @@ $o-base-website-values-palette: (
'font-size-base': 1rem, // Need a set value as the value is used in bootstrap_overridden files
'google-fonts': null,
+ 'body-image': null,
+ 'body-image-type': 'image', // 'image' or 'pattern'
+
'color-palettes-number': null, // Default to the individual variables for each color palette type
'btn-primary-outline': false,
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6b2421d3b4f..a4c517cb1b3 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -59,10 +59,18 @@ $-seen-urls: ();
}
#wrapwrap {
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- background-attachment: fixed;
+ @if o-website-value('body-image') {
+ background-image: url("/#{str-slice(o-website-value('body-image'), 2)}");
+ background-position: center;
+ background-attachment: fixed;
+ @if o-website-value('body-image-type') == 'pattern' {
+ background-size: auto;
+ background-repeat: repeat;
+ } @else {
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ }
@if ($o-theme-layout == 'boxed') {
@include media-breakpoint-up(md) {
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index ff1be534de8..d49d03291e8 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -886,18 +886,17 @@
-
+
+ data-customize-body-bg-type="'image'">
+ data-customize-body-bg-type="'pattern'">
+ data-customize-body-bg-type="NONE">
-
+
-
-
-
-
-
-
-
-
-
-
-
-