diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 7f60a976a35..bfd15d4b7c1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1673,4 +1673,139 @@ options.registry.anchorName = options.Class.extend({
         this.$target.trigger('content_changed');
     },
 });
+
+/**
+ * Allows edition of 'cover_properties' in website models which have such
+ * fields (blogs, posts, events, ...).
+ */
+options.registry.CoverProperties = options.Class.extend({
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+
+        this.$image = this.$target.find('.o_record_cover_image');
+        this.$filter = this.$target.find('.o_record_cover_filter');
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        this.$filterValueOpts = this.$el.find('[data-filter-value]');
+        this.$filterColorOpts = this.$el.find('[data-filter-color]');
+        this.filterColorClasses = this.$filterColorOpts.map(function () {
+            return $(this).data('filterColor');
+        }).get().join(' ');
+
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @see this.selectClass for parameters
+     */
+    clear: function (previewMode, value, $opt) {
+        this.selectClass(previewMode, '', $());
+        this.$image.css('background-image', '');
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    change: function (previewMode, value, $opt) {
+        var $image = $('<img/>');
+        var background = this.$image.css('background-image');
+        if (background && background !== 'none') {
+            $image.attr('src', background.match(/^url\(["']?(.+?)["']?\)$/)[1]);
+        }
+
+        var editor = new weWidgets.MediaDialog(this, {
+            mediaWidth: 1920,
+            onlyImages: true,
+            firstFilters: ['background']
+        }, $image[0]).open();
+        editor.on('save', this, function (image) {
+            var src = image.src;
+            this.$image.css('background-image', src ? ('url(' + src + ')') : '');
+            if (!this.$target.hasClass('o_record_has_cover')) {
+                var $opt = this.$el.find('.o_record_cover_opt_size_default[data-select-class]');
+                this.selectClass(previewMode, $opt.data('selectClass'), $opt);
+            }
+            this._setActive();
+        });
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    filterValue: function (previewMode, value, $opt) {
+        this.$filter.css('opacity', value);
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    filterColor: function (previewMode, value, $opt) {
+        this.$filter.removeClass(this.filterColorClasses);
+        if (value) {
+            this.$filter.addClass(value);
+        }
+
+        var $firstVisibleFilterOpt = this.$filterValueOpts.eq(1);
+        if (parseFloat(this.$filter.css('opacity')) < parseFloat($firstVisibleFilterOpt.data('filterValue'))) {
+            this.filterValue(previewMode, $firstVisibleFilterOpt.data('filterValue'), $firstVisibleFilterOpt);
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @override
+     */
+    _setActive: function () {
+        this._super.apply(this, arguments);
+
+        _.each(this.$el.children(), el => {
+            var $el = $(el);
+
+            if (!$el.is('[data-change]')) {
+                $el.removeClass('d-none');
+
+                ['size', 'filters', 'text_size', 'text_align'].forEach(optName => {
+                    var $opts = $el.find('[data-cover-opt="' + optName + '"]');
+                    var notAllowed = (this.$target.data('use_' + optName) !== 'True');
+
+                    if ($opts.length && (!this.$target.hasClass('o_record_has_cover') || notAllowed)) {
+                        $el.addClass('d-none');
+                    }
+                });
+            }
+        });
+
+        this.$el.find('[data-clear]').toggleClass('d-none', !this.$target.hasClass('o_record_has_cover'));
+
+        this.$filterValueOpts.removeClass('active');
+        this.$filterColorOpts.removeClass('active');
+
+        var activeFilterValue = this.$filterValueOpts
+            .filter(el => {
+                return (parseFloat($(el).data('filterValue')).toFixed(1) === parseFloat(this.$filter.css('opacity')).toFixed(1));
+            }).addClass('active').data('filterValue');
+
+        var activeFilterColor = this.$filterColorOpts
+            .filter(el => {
+                return this.$filter.hasClass($(el).data('filterColor'));
+            }).addClass('active').data('filterColor');
+
+        this.$target[0].dataset.coverClass = this.$el.find('.active[data-cover-opt="size"]').data('selectClass') || '';
+        this.$target[0].dataset.textSizeClass = this.$el.find('.active[data-cover-opt="text_size"]').data('selectClass') || '';
+        this.$target[0].dataset.textAlignClass = this.$el.find('.active[data-cover-opt="text_align"]').data('selectClass') || '';
+        this.$target[0].dataset.filterValue = activeFilterValue || 0.0;
+        this.$target[0].dataset.filterColor = activeFilterColor || '';
+    },
+});
 });
diff --git a/addons/website/static/src/js/editor/wysiwyg_multizone.js b/addons/website/static/src/js/editor/wysiwyg_multizone.js
index 8c7fbfb2e0c..3c34033b933 100644
--- a/addons/website/static/src/js/editor/wysiwyg_multizone.js
+++ b/addons/website/static/src/js/editor/wysiwyg_multizone.js
@@ -112,6 +112,49 @@ var WysiwygMultizone = Wysiwyg.extend({
     _getEditableArea: function () {
         return $(':o_editable');
     },
+    /**
+     * @private
+     * @param {HTMLElement} editable
+     */
+    _saveCoverProperties: function (editable) {
+        var el = editable.closest('.o_record_cover_container');
+        if (!el) {
+            return;
+        }
+
+        var resModel = el.dataset.resModel;
+        var resID = parseInt(el.dataset.resId);
+        if (!resModel || !resID) {
+            throw new Error('There should be a model and id associated to the cover');
+        }
+
+        this.__savedCovers = this.__savedCovers || {};
+        this.__savedCovers[resModel] = this.__savedCovers[resModel] || [];
+
+        if (this.__savedCovers[resModel].includes(resID)) {
+            return;
+        }
+        this.__savedCovers[resModel].push(resID);
+
+        var cssBgImage = $(el.querySelector('.o_record_cover_image')).css('background-image');
+        var coverProps = {
+            'background-image': cssBgImage.replace(/"/g, '').replace(window.location.protocol + "//" + window.location.host, ''),
+            'background-color': el.dataset.filterColor,
+            'opacity': el.dataset.filterValue,
+            'resize_class': el.dataset.coverClass,
+            'text_size_class': el.dataset.textSizeClass,
+            'text_align_class': el.dataset.textAlignClass,
+        };
+
+        return this._rpc({
+            model: resModel,
+            method: 'write',
+            args: [
+                resID,
+                {'cover_properties': JSON.stringify(coverProps)}
+            ],
+        });
+    },
     /**
      * Saves one (dirty) element of the page.
      *
@@ -127,6 +170,7 @@ var WysiwygMultizone = Wysiwyg.extend({
 
         var $el = $(editable);
 
+        // Saving a view content
         var viewID = $el.data('oe-id');
         if (viewID) {
             promises.push(this._rpc({
@@ -141,6 +185,7 @@ var WysiwygMultizone = Wysiwyg.extend({
             }));
         }
 
+        // Saving mega menu options
         if ($el.data('oe-field') === 'mega_menu_content') {
             // On top of saving the mega menu content like any other field
             // content, we must save the custom classes that were set on the
@@ -160,6 +205,12 @@ var WysiwygMultizone = Wysiwyg.extend({
             }));
         }
 
+        // Saving cover properties on related model if any
+        var prom = this._saveCoverProperties(editable);
+        if (prom) {
+            promises.push(prom);
+        }
+
         return Promise.all(promises);
     },
     /**
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 79f516fed64..2db0bdeacd2 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1222,3 +1222,16 @@ table.table_desc tr td {
 .modal-footer > .float-left {
     margin-right: auto;
 }
+
+// CoverProperties
+.o_record_cover_container {
+    position: relative;
+
+    .o_record_cover_component {
+        @include o-position-absolute(0, 0, 0, 0);
+
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+}
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 5d6059c2c35..167f3084b5d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1466,5 +1466,66 @@
     <div data-selector=".o_mega_menu .nav-link"
          data-drop-in=".o_mega_menu nav"
          data-drop-near=".o_mega_menu .nav-link"/>
+
+    <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
+        <we-button data-change="true" data-no-preview="true">Change Cover</we-button>
+        <we-button data-clear="true" data-no-preview="true">Remove Cover</we-button>
+        <we-collapse-area>
+            <we-toggler>Size</we-toggler>
+            <we-collapse>
+                <we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_full">
+                    Full Screen
+                </we-button>
+                <we-button data-cover-opt="size" class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover cover_mid">
+                    Half Screen
+                </we-button>
+                <we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_auto">
+                    Fit text
+                </we-button>
+            </we-collapse>
+        </we-collapse-area>
+        <we-collapse-area>
+            <we-toggler>Filter Intensity</we-toggler>
+            <we-collapse>
+                <we-button data-cover-opt="filters" data-filter-value="0.0">None</we-button>
+                <we-button data-cover-opt="filters" data-filter-value="0.2">Low</we-button>
+                <we-button data-cover-opt="filters" data-filter-value="0.4">Medium</we-button>
+                <we-button data-cover-opt="filters" data-filter-value="0.6">High</we-button>
+            </we-collapse>
+        </we-collapse-area>
+        <we-collapse-area>
+            <we-toggler>Filter Color</we-toggler>
+            <we-collapse>
+                <we-button data-cover-opt="filters" data-filter-color="oe_black">Black</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="oe_none">White</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="bg-primary">Primary</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="bg-secondary">Secondary</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="oe_blue">Blue</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="oe_yellow">Yellow</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="oe_red">Red</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="oe_purple">Purple</we-button>
+                <we-button data-cover-opt="filters" data-filter-color="oe_green">Green</we-button>
+            </we-collapse>
+        </we-collapse-area>
+        <we-collapse-area>
+            <we-toggler>Text Size</we-toggler>
+            <we-collapse>
+                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_hero">Hero</we-button>
+                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_huge">Huge</we-button>
+                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_big">Big</we-button>
+                <we-button data-cover-opt="text_size" data-select-class="">Regular</we-button>
+                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_small">Small</we-button>
+                <we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_tiny">Tiny</we-button>
+            </we-collapse>
+        </we-collapse-area>
+        <we-collapse-area>
+            <we-toggler>Text Alignment</we-toggler>
+            <we-collapse>
+                <we-button data-cover-opt="text_align" data-select-class="">Left</we-button>
+                <we-button data-cover-opt="text_align" data-select-class="text-center">Centered</we-button>
+                <we-button data-cover-opt="text_align" data-select-class="text-right">Right</we-button>
+            </we-collapse>
+        </we-collapse-area>
+    </div>
 </template>
 </odoo>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 41455c649a0..b38a850405c 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -434,6 +434,21 @@
     </ul>
 </template>
 
+<template id="record_cover">
+    <t t-set="_cp" t-value="_cp or json.loads(_record.cover_properties)"/>
+    <div t-att-data-use_size="use_size"
+         t-att-data-use_filters="use_filters"
+         t-att-data-use_text_size="use_text_size"
+         t-att-data-use_text_align="use_text_align"
+         t-att-data-res-model="request.env.user.has_group('website.group_website_publisher') and _record._name"
+         t-att-data-res-id="request.env.user.has_group('website.group_website_publisher') and _record.id"
+         t-attf-class="o_record_cover_container d-flex flex-column h-100 bg-secondary #{use_size and _cp.get('resize_class')} #{use_text_size and _cp.get('text_size_class')} #{use_text_align and _cp.get('text_align_class')} #{additionnal_classes}">
+        <div class="o_record_cover_component o_record_cover_image" t-attf-style="background-image: #{_cp.get('background-image')};"/>
+        <div t-if="use_filters" t-attf-class="o_record_cover_component o_record_cover_filter #{_cp.get('background-color')}" t-attf-style="opacity: #{_cp.get('opacity', 0.0)};"/>
+        <t t-raw="0"/>
+    </div>
+</template>
+
 <!-- Util template -->
 <template id="publish_management">
     <div groups="website.group_website_publisher" t-ignore="true" class="float-right css_editable_mode_hidden" t-att-style="style or None">
diff --git a/addons/website_blog/data/website_blog_data.xml b/addons/website_blog/data/website_blog_data.xml
index ad250889d98..bcba834635d 100644
--- a/addons/website_blog/data/website_blog_data.xml
+++ b/addons/website_blog/data/website_blog_data.xml
@@ -4,7 +4,7 @@
         <record id="blog_blog_1" model="blog.blog">
             <field name="name">Our blog</field>
             <field name="subtitle">We are a team of passionate people whose goal is to improve everyone's life.</field>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_5.jpg')", "resize_class": "o_wblog_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_5.jpg')", "resize_class": "o_record_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
         </record>
 
         <record id="menu_blog" model="website.menu">
diff --git a/addons/website_blog/data/website_blog_demo.xml b/addons/website_blog/data/website_blog_demo.xml
index 94305365803..97dc9c82e31 100644
--- a/addons/website_blog/data/website_blog_demo.xml
+++ b/addons/website_blog/data/website_blog_demo.xml
@@ -4,12 +4,12 @@
         <record id="blog_blog_1" model="blog.blog">
             <field name="name">Travel</field>
             <field name="subtitle">Holiday tips</field>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/blog_1.jpeg')", "text_size_class": "o_wblog_cover_font_big", "resize_class": "o_wblog_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/blog_1.jpeg')", "text_size_class": "o_record_cover_font_big", "resize_class": "o_record_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
         </record>
         <record id="blog_blog_2" model="blog.blog">
             <field name="name">Astronomy</field>
             <field name="subtitle">Astronomy is “stargazing"</field>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/blog_2.jpeg')", "text_size_class": "o_wblog_cover_font_big", "resize_class": "o_wblog_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/blog_2.jpeg')", "text_size_class": "o_record_cover_font_big", "resize_class": "o_record_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
         </record>
 
         <!-- TAGS -->
@@ -37,7 +37,7 @@
             <field name="is_published" eval="True"/>
             <field name="published_date" eval="time.strftime('%Y-%m-%d %H:%M:%S')"/>
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_1'), ref('blog_tag_2')])]"/>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_1.jpg')", "resize_class": "o_wblog_has_cover cover_full", "text_size_class": "o_wblog_cover_font_big", "background-color": "oe_black", "opacity": "0"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_1.jpg')", "resize_class": "o_record_has_cover cover_full", "text_size_class": "o_record_cover_font_big", "background-color": "oe_black", "opacity": "0"}</field>
             <field name="content"><![CDATA[
 <p class="lead">Sierra Tarahumara, popularly known as Copper Canyon is situated in Mexico. The area is a favorite destination among those seeking an adventurous vacation.</p>
 <p>Copper Canyon is one of the six gorges in the area. Although the name suggests that the gorge might have some relevance to copper mining, this is not the case. The name is derived from the copper and green lichen covering the canyon. Copper Canyon has two climatic zones. The region features an alpine climate at the top and a subtropical climate at the lower levels. Winters are cold with frequent snowstorms at the higher altitudes. Summers are dry and hot. The capital city, Chihuahua, is a high altitude desert where weather ranges from cold winters to hot summers. The region is unique because of the various ecosystems that exist within it.</p>
@@ -72,7 +72,7 @@
             <field name="is_published" eval="True"/>
             <field name="published_date" eval="(datetime.now()-relativedelta(days=2)).strftime('%Y-%m-%d %H:%M:%S')"/>
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_2')])]"/>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_2.jpg')", "resize_class": "o_wblog_has_cover cover_mid", "text_size_class": "o_wblog_cover_font_big", "background-color": "oe_blue", "opacity": "0.4"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_2.jpg')", "resize_class": "o_record_has_cover cover_mid", "text_size_class": "o_record_cover_font_big", "background-color": "oe_blue", "opacity": "0.4"}</field>
             <field name="content"><![CDATA[
 <section class="container">
     <div class="row">
@@ -119,7 +119,7 @@ People who live on the island have never even seen this remarkable scenery unles
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_1')])]"/>
             <field name="website_published" eval="True"/>
             <field name="published_date" eval="(datetime.now()-relativedelta(days=1)).strftime('%Y-%m-%d %H:%M:%S')"/>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_3.jpg')", "resize_class": "o_wblog_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_3.jpg')", "resize_class": "o_record_has_cover cover_mid", "background-color": "oe_black", "opacity": "0.4"}</field>
             <field name="content"><![CDATA[
 <p class="lead">So you’re going abroad, you’ve chosen your destination and now you have to choose a hotel.</p>
 <p>Ten years ago, you’d have probably visited your local travel agent and trusted the face-to-face advice you were given by the so called ‘experts’. The 21st Century way to select and book your hotel is of course on the Internet, by using travel websites.</p>
@@ -170,7 +170,7 @@ People who live on the island have never even seen this remarkable scenery unles
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_5')])]"/>
             <field name="website_published" eval="True"/>
             <field name="published_date" eval="(datetime.now()-relativedelta(days=6)).strftime('%Y-%m-%d %H:%M:%S')"/>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_4.jpg')", "resize_class": "o_wblog_has_cover cover_mid", "text_size_class": "o_wblog_cover_font_big", "text_align_class": "text-center", "background-color": "oe_black", "opacity": "0.2"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_4.jpg')", "resize_class": "o_record_has_cover cover_mid", "text_size_class": "o_record_cover_font_big", "text_align_class": "text-center", "background-color": "oe_black", "opacity": "0.2"}</field>
             <field name="content"><![CDATA[
 <p class="lead">It is safe to say that at some point on our lives, each and every one of us has that moment when we are suddenly stunned when we come face to face with the enormity of the universe that we see in the night sky.</p>
 
@@ -210,7 +210,7 @@ People who live on the island have never even seen this remarkable scenery unles
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_4'), ref('blog_tag_5')])]"/>
             <field name="website_published" eval="True"/>
             <field name="published_date" eval="(datetime.now()-relativedelta(days=4)).strftime('%Y-%m-%d %H:%M:%S')"/>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_5.jpg')", "resize_class": "o_wblog_has_cover cover_mid", "text_align_class": "text-center", "background-color": "oe_black", "opacity": "0.2"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_5.jpg')", "resize_class": "o_record_has_cover cover_mid", "text_align_class": "text-center", "background-color": "oe_black", "opacity": "0.2"}</field>
             <field name="content"><![CDATA[
 <p class="lead">From the tiniest baby to the most advanced astrophysicist, there is something for anyone who wants to enjoy astronomy. In fact, it is a science that is so accessible that virtually anybody can do it virtually anywhere they are. All they have to know how to do is to look up.</p>
 <p>It really is amazing when you think about it that just by looking up on any given night, you could see virtually hundreds of thousands of stars, star systems, planets, moons, asteroids, comets and maybe a even an occasional space shuttle might wander by. It is even more breathtaking when you realize that the sky you are looking up at is for all intents and purposes the exact same sky that our ancestors hundreds and thousands of years ago enjoyed when they just looked up.</p>
@@ -253,7 +253,7 @@ People who live on the island have never even seen this remarkable scenery unles
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_3'), ref('blog_tag_4')])]"/>
             <field name="website_published" eval="True"/>
             <field name="published_date" eval="(datetime.now()-relativedelta(days=3)).strftime('%Y-%m-%d %H:%M:%S')"/>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_6.jpg')", "resize_class": "o_wblog_has_cover cover_full", "text_size_class": "o_wblog_cover_font_huge", "text_align_class": "text-center", "background-color": "oe_black", "opacity": "0.2"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_6.jpg')", "resize_class": "o_record_has_cover cover_full", "text_size_class": "o_record_cover_font_huge", "text_align_class": "text-center", "background-color": "oe_black", "opacity": "0.2"}</field>
             <field name="content"><![CDATA[
 <p class="lead">Buying the right telescope to take your love of astronomy to the next level is a big next step in the development of your passion for the stars.</p>
 <p>In many ways, it is a big step from someone who is just fooling around with astronomy to a serious student of the science. But you and I both know that there is still another big step after buying a telescope before you really know how to use it.</p>
@@ -294,7 +294,7 @@ People who live on the island have never even seen this remarkable scenery unles
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_5')])]"/>
             <field name="website_published" eval="True"/>
             <field name="published_date" eval="(datetime.now()-relativedelta(days=7)).strftime('%Y-%m-%d %H:%M:%S')"/>
-            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_7.jpg')", "resize_class": "o_wblog_has_cover cover_mid", "text_size_class": "o_wblog_cover_font_big", "background-color": "oe_black", "opacity": "0.4"}</field>
+            <field name="cover_properties">{"background-image": "url('/website_blog/static/src/img/cover_7.jpg')", "resize_class": "o_record_has_cover cover_mid", "text_size_class": "o_record_cover_font_big", "background-color": "oe_black", "opacity": "0.4"}</field>
             <field name="content"><![CDATA[
 <p class="lead">For many of us, our very first experience of learning about the celestial bodies begins when we saw our first full moon in the sky. It is truly a magnificent view even to the naked eye.</p>
 <p>If the night is clear, you can see amazing detail of the lunar surface just star gazing on in your back yard.
diff --git a/addons/website_blog/static/src/js/s_latest_posts_frontend.js b/addons/website_blog/static/src/js/s_latest_posts_frontend.js
index 3d8c7bc35a9..8192290dc09 100644
--- a/addons/website_blog/static/src/js/s_latest_posts_frontend.js
+++ b/addons/website_blog/static/src/js/s_latest_posts_frontend.js
@@ -91,7 +91,7 @@ publicWidget.registry.js_get_posts = publicWidget.Widget.extend({
         _.each($posts, function (post, i) {
             var $post = $(post);
             var $progress = $post.find('.s_latest_posts_loader');
-            var bgUrl = $post.find('.o_blog_cover_image').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "") || 'none';
+            var bgUrl = $post.find('.o_record_cover_image').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "") || 'none';
 
             // Append $post to the snippet, regardless by the loading state.
             $post.appendTo(self.$target);
@@ -110,7 +110,7 @@ publicWidget.registry.js_get_posts = publicWidget.Widget.extend({
             // If the image is not loaded in 10 sec, remove loader and provide a fallback bg-color to the container.
             // Hopefully one day the image will load, covering the bg-color...
             var timer = setTimeout(function () {
-                $post.find('.o_blog_cover_image').addClass('bg-200');
+                $post.find('.o_record_cover_image').addClass('bg-200');
                 $progress.remove();
             }, 10000);
 
diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js
index df5525e0dd3..d2d2aeb0da3 100644
--- a/addons/website_blog/static/src/js/website_blog.editor.js
+++ b/addons/website_blog/static/src/js/website_blog.editor.js
@@ -59,10 +59,12 @@ odoo.define('website_blog.editor', function (require) {
 'use strict';
 
 require('web.dom_ready');
-var weWidgets = require('wysiwyg.widgets');
+var core = require('web.core');
 var options = require('web_editor.snippets.options');
 var WysiwygMultizone = require('web_editor.wysiwyg.multizone');
 
+var _t = core._t;
+
 if (!$('.website_blog').length) {
     return Promise.reject("DOM doesn't contain '.website_blog'");
 }
@@ -81,67 +83,6 @@ WysiwygMultizone.include({
         });
         return this._super.apply(this, arguments);
     },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _saveElement: function (outerHTML, recordInfo, editable) {
-        var prom = this._super.apply(this, arguments);
-
-        var el = editable.closest('.o_blog_cover_container');
-        if (!el) {
-            return prom;
-        }
-
-        var ancestor = el.closest('[name="blog_post"], #o_wblog_blog_top, #o_wblog_post_top');
-        var blogID = parseInt($(ancestor.querySelector('[data-oe-model="blog.blog"]')).data('oe-id'), 10);
-        var postID = parseInt($(ancestor.querySelector('[data-oe-model="blog.post"]')).data('oe-id'), 10);
-
-        if (blogID) {
-            this.__savedCoversBlogIDs = this.__savedCoversBlogIDs || [];
-            if (this.__savedCoversBlogIDs.includes(blogID)) {
-                return prom;
-            }
-            this.__savedCoversBlogIDs.push(blogID);
-        }
-        if (postID) {
-            this.__savedCoversPostIDs = this.__savedCoversPostIDs || [];
-            if (this.__savedCoversPostIDs.includes(postID)) {
-                return prom;
-            }
-            this.__savedCoversPostIDs.push(postID);
-        }
-
-        var model = postID ? 'blog.post' : blogID ? 'blog.blog' : false;
-        if (!model) {
-            return prom;
-        }
-
-        var cssBgImage = $(el.querySelector('.o_blog_cover_image')).css('background-image');
-        var coverProps = {
-            'background-image': cssBgImage.replace(/"/g, '').replace(window.location.protocol + "//" + window.location.host, ''),
-            'background-color': el.dataset.filterColor,
-            'opacity': el.dataset.filterValue,
-            'resize_class': el.dataset.coverClass,
-            'text_size_class': el.dataset.textSizeClass,
-            'text_align_class': el.dataset.textAlignClass,
-        };
-
-        var prom2 = this._rpc({
-            model: model,
-            method: 'write',
-            args: [
-                postID || blogID,
-                {'cover_properties': JSON.stringify(coverProps)}
-            ],
-        });
-
-        return Promise.all([prom, prom2]);
-    },
 });
 
 options.registry.many2one.include({
@@ -169,138 +110,22 @@ options.registry.many2one.include({
     }
 });
 
-options.registry.blog_cover = options.Class.extend({
+options.registry.CoverProperties.include({
     /**
-     * @constructor
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-
-        this.$image = this.$target.find('.o_blog_cover_image');
-        this.$filter = this.$target.find('.o_blog_cover_filter');
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this.$filterValueOpts = this.$el.find('[data-filter-value]');
-        this.$filterColorOpts = this.$el.find('[data-filter-color]');
-        this.filterColorClasses = this.$filterColorOpts.map(function () {
-            return $(this).data('filterColor');
-        }).get().join(' ');
-
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Options
-    //--------------------------------------------------------------------------
-
-    /**
-     * @see this.selectClass for parameters
-     */
-    clear: function (previewMode, value, $opt) {
-        this.selectClass(previewMode, '', $());
-        this.$image.css('background-image', '');
-    },
-    /**
-     * @see this.selectClass for parameters
-     */
-    change: function (previewMode, value, $opt) {
-        var $image = $('<img/>');
-        var background = this.$image.css('background-image');
-        if (background && background !== 'none') {
-            $image.attr('src', background.match(/^url\(["']?(.+?)["']?\)$/)[1]);
-        }
-
-        var editor = new weWidgets.MediaDialog(this, {
-            mediaWidth: 1920,
-            onlyImages: true,
-            firstFilters: ['background']
-        }, $image[0]).open();
-        editor.on('save', this, function (image) {
-            var src = image.src;
-            this.$image.css('background-image', src ? ('url(' + src + ')') : '');
-            if (!this.$target.hasClass('o_wblog_has_cover')) {
-                var $opt = this.$el.find('.o_wblog_cover_opt_size_default[data-select-class]');
-                this.selectClass(previewMode, $opt.data('selectClass'), $opt);
-            }
-            this._setActive();
-        });
-    },
-    /**
-     * @see this.selectClass for parameters
-     */
-    filterValue: function (previewMode, value, $opt) {
-        this.$filter.css('opacity', value);
-    },
-    /**
-     * @see this.selectClass for parameters
-     */
-    filterColor: function (previewMode, value, $opt) {
-        this.$filter.removeClass(this.filterColorClasses);
-        if (value) {
-            this.$filter.addClass(value);
-        }
-
-        var $firstVisibleFilterOpt = this.$filterValueOpts.eq(1);
-        if (parseFloat(this.$filter.css('opacity')) < parseFloat($firstVisibleFilterOpt.data('filterValue'))) {
-            this.filterValue(previewMode, $firstVisibleFilterOpt.data('filterValue'), $firstVisibleFilterOpt);
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
      * @override
      */
     _setActive: function () {
-        this._super.apply(this, arguments);
-        var self = this;
+        this._super(...arguments);
         var isRegularCover = this.$target.is('.o_wblog_post_page_cover_regular');
-
-        _.each(this.$el.children(), function (el) {
-            var $el = $(el);
-
-            if (!$el.is('[data-change]')) {
-                $el.removeClass('d-none');
-
-                ['size', 'filters', 'text_size', 'text_align'].forEach(optName => {
-                    var $opts = $el.find('[data-cover-opt="' + optName + '"]');
-                    var notAllowed = (self.$target.data('use_' + optName) !== 'True');
-
-                    if ($opts.length && (!self.$target.hasClass('o_wblog_has_cover') || notAllowed)) {
-                        $el.addClass('d-none');
-                    }
-                });
-            }
-            $el.find('.o_js_hide_regular').toggleClass('d-none', isRegularCover);
-            $el.find('.o_js_show_regular').toggleClass('d-none', !isRegularCover);
-        });
-
-        this.$el.find('[data-clear]').toggleClass('d-none', !self.$target.hasClass('o_wblog_has_cover'));
-
-        this.$filterValueOpts.removeClass('active');
-        this.$filterColorOpts.removeClass('active');
-
-        var activeFilterValue = this.$filterValueOpts
-            .filter(function () {
-                return (parseFloat($(this).data('filterValue')).toFixed(1) === parseFloat(self.$filter.css('opacity')).toFixed(1));
-            }).addClass('active').data('filterValue');
-
-        var activeFilterColor = this.$filterColorOpts
-            .filter(function () {
-                return self.$filter.hasClass($(this).data('filterColor'));
-            }).addClass('active').data('filterColor');
-
-        this.$target[0].dataset.coverClass = this.$el.find('.active[data-cover-opt="size"]').data('selectClass') || '';
-        this.$target[0].dataset.textSizeClass = this.$el.find('.active[data-cover-opt="text_size"]').data('selectClass') || '';
-        this.$target[0].dataset.textAlignClass = this.$el.find('.active[data-cover-opt="text_align"]').data('selectClass') || '';
-        this.$target[0].dataset.filterValue = activeFilterValue || 0.0;
-        this.$target[0].dataset.filterColor = activeFilterColor || '';
+        var $coverFull = this.$el.find('[data-select-class*="cover_full"]');
+        var $coverMid = this.$el.find('[data-select-class*="cover_mid"]');
+        var $coverAuto = this.$el.find('[data-select-class*="cover_auto"]');
+        this._coverFullOriginalLabel = this._coverFullOriginalLabel || $coverFull.text();
+        this._coverMidOriginalLabel = this._coverMidOriginalLabel || $coverMid.text();
+        this._coverAutoOriginalLabel = this._coverAutoOriginalLabel || $coverAuto.text();
+        $coverFull.text(isRegularCover ? _t("Large") : this._coverFullOriginalLabel);
+        $coverMid.text(isRegularCover ? _t("Medium") : this._coverMidOriginalLabel);
+        $coverAuto.text(isRegularCover ? _t("Tiny") : this._coverAutoOriginalLabel);
     },
 });
 });
diff --git a/addons/website_blog/static/src/js/website_blog.js b/addons/website_blog/static/src/js/website_blog.js
index 246151922d5..1f1cb34d4c4 100644
--- a/addons/website_blog/static/src/js/website_blog.js
+++ b/addons/website_blog/static/src/js/website_blog.js
@@ -33,7 +33,7 @@ publicWidget.registry.websiteBlog = publicWidget.Widget.extend({
         var nexInfo = $el.find('#o_wblog_next_post_info').data();
 
         $el.css('height', $(window).height())
-           .find('.o_blog_cover_container').addClass(nexInfo.size + ' ' + nexInfo.text).end()
+           .find('.o_record_cover_container').addClass(nexInfo.size + ' ' + nexInfo.text).end()
            .find('.o_wblog_toggle').toggleClass('d-none');
 
         // Use _.defer to calculate the 'offset()'' only after that size classes
diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss
index 25ddd75a635..cd5fc6e409c 100644
--- a/addons/website_blog/static/src/scss/website_blog.scss
+++ b/addons/website_blog/static/src/scss/website_blog.scss
@@ -24,7 +24,7 @@ $o-wblog-title-sizes-variants: (
         title: $display1-size,
         subtitle: $lead-font-size*1.75
     )
-);
+) !default;
 
 // ======= ANIMATIONS =======
 // Attention keeper for the "scroll down" top-banner button
@@ -74,21 +74,6 @@ $o-wblog-title-sizes-variants: (
     background-image: linear-gradient(#{$stops});
 }
 
-// ======== Cover container =========
-// A generic component that can be used even outside blog using snippets.
-// In website_blog it's used for blog post posts.
-.o_blog_cover_container {
-    position: relative;
-
-    .o_blog_cover_component {
-        @include o-position-absolute(0, 0, 0, 0);
-
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-    }
-}
-
 //------------------------------------------------------------------------------
 // Website Blog
 //------------------------------------------------------------------------------
@@ -191,19 +176,19 @@ $o-wblog-title-sizes-variants: (
     // ==============================================
     .o_wblog_post_page_cover {
         // By default (no image defined), inner filters elements are hidden.
-        .o_blog_cover_component {
+        .o_record_cover_component {
             display: none;
         }
 
         // If a cover image is defined, show filters + adapt inner typography
-        &.o_wblog_has_cover {
-            .o_blog_cover_image:after {
+        &.o_record_has_cover {
+            .o_record_cover_image:after {
                 content: "";
                 display: block;
                 @include o-position-absolute(0,0,50%,0);
                 @include o-wbblog-scrim-gradient(rgba(black, 0.5), transparent);
             }
-            .o_blog_cover_component {
+            .o_record_cover_component {
                 display: block;
             }
 
@@ -254,7 +239,7 @@ $o-wblog-title-sizes-variants: (
             // "Regular Cover" design sizes
             // ==============================================
             &.o_wblog_post_page_cover_regular {
-                .o_blog_cover_image:after {
+                .o_record_cover_image:after {
                     visibility: hidden;
                 }
 
@@ -294,7 +279,7 @@ $o-wblog-title-sizes-variants: (
 
     // Size variants
     @each $size, $map in $o-wblog-title-sizes-variants {
-        .o_wblog_cover_font_#{$size} .o_wblog_post_title {
+        .o_record_cover_font_#{$size} .o_wblog_post_title {
             #o_wblog_post_name {
                 @include font-size(map-get($map, title));
             }
@@ -343,14 +328,14 @@ $o-wblog-title-sizes-variants: (
     // Blog Index Pages
     // ==============================================
     #o_wblog_posts_loop {
-        .o_blog_cover_container {
+        .o_record_cover_container {
             box-shadow: inset 0 0 0 1px rgba(white, 0.3);
             background: rgba(black, 0.1);
 
             padding-top: 33%;
             height: auto!important;
 
-            &:hover .o_blog_cover_image {
+            &:hover .o_record_cover_image {
                 opacity: 0.8;
             }
         }
@@ -366,10 +351,10 @@ $o-wblog-title-sizes-variants: (
         }
 
         &.o_wblog_list_view {
-            .o_blog_cover_container {
+            .o_record_cover_container {
                 padding-top: 20%;
             }
-            .o_wblog_post_cover_nocard .o_blog_cover_container {
+            .o_wblog_post_cover_nocard .o_record_cover_container {
                 padding-top: 33%;
             }
         }
@@ -380,7 +365,7 @@ $o-wblog-title-sizes-variants: (
     // ==============================================
     body.editor_enable & {
         // Make empty covers visible in edit mode
-        .o_blog_cover_container.o_wblog_post_page_cover:not(.o_wblog_has_cover) {
+        .o_record_cover_container.o_wblog_post_page_cover:not(.o_record_has_cover) {
             background-color: $gray-100;
             padding: 30px 0;
             border: 1px dashed $gray-500;
@@ -445,7 +430,7 @@ $o-wblog-title-sizes-variants: (
         .s_latest_posts_post_cover {
             min-height: 100%;
 
-            .o_blog_cover_container {
+            .o_record_cover_container {
                 top: 0;
             }
         }
diff --git a/addons/website_blog/views/snippets.xml b/addons/website_blog/views/snippets.xml
index 37ccba01dba..21d8f66727a 100644
--- a/addons/website_blog/views/snippets.xml
+++ b/addons/website_blog/views/snippets.xml
@@ -5,71 +5,6 @@
         <t t-snippet="website_blog.s_latest_posts" t-thumbnail="/website_blog/static/src/img/s_latest_posts.jpg"/>
         <t t-snippet="website_blog.s_latest_posts_big_picture" t-thumbnail="/website_blog/static/src/img/s_latest_posts_big_picture.jpg"/>
     </xpath>
-
-    <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-js="blog_cover" data-selector=".website_blog .o_blog_cover_container" data-no-check="true">
-            <we-button data-change="true" data-no-preview="true">Change Cover</we-button>
-            <we-button data-clear="true" data-no-preview="true">Remove Cover</we-button>
-            <we-collapse-area>
-                <we-toggler>Size</we-toggler>
-                <we-collapse>
-                    <we-button data-cover-opt="size" data-select-class="o_wblog_has_cover cover_full">
-                        <span class="o_js_hide_regular">Full Screen</span>
-                        <span class="o_js_show_regular">Large</span>
-                    </we-button>
-                    <we-button data-cover-opt="size" class="o_wblog_cover_opt_size_default" data-select-class="o_wblog_has_cover cover_mid">
-                        <span class="o_js_hide_regular">Half Screen</span>
-                        <span class="o_js_show_regular">Medium</span>
-                    </we-button>
-                    <we-button data-cover-opt="size" data-select-class="o_wblog_has_cover cover_auto">
-                        <span class="o_js_hide_regular">Fit text</span>
-                        <span class="o_js_show_regular">Tiny</span>
-                    </we-button>
-                </we-collapse>
-            </we-collapse-area>
-            <we-collapse-area>
-                <we-toggler>Filter Intensity</we-toggler>
-                <we-collapse>
-                    <we-button data-cover-opt="filters" data-filter-value="0.0">None</we-button>
-                    <we-button data-cover-opt="filters" data-filter-value="0.2">Low</we-button>
-                    <we-button data-cover-opt="filters" data-filter-value="0.4">Medium</we-button>
-                    <we-button data-cover-opt="filters" data-filter-value="0.6">High</we-button>
-                </we-collapse>
-            </we-collapse-area>
-            <we-collapse-area>
-                <we-toggler>Filter Color</we-toggler>
-                <we-collapse>
-                    <we-button data-cover-opt="filters" data-filter-color="oe_black">Black</we-button>
-                    <we-button data-cover-opt="filters" data-filter-color="bg-primary">Primary</we-button>
-                    <we-button data-cover-opt="filters" data-filter-color="oe_none">White</we-button>
-                    <we-button data-cover-opt="filters" data-filter-color="oe_blue">Blue</we-button>
-                    <we-button data-cover-opt="filters" data-filter-color="oe_yellow">Yellow</we-button>
-                    <we-button data-cover-opt="filters" data-filter-color="oe_red">Red</we-button>
-                    <we-button data-cover-opt="filters" data-filter-color="oe_purple">Purple</we-button>
-                    <we-button data-cover-opt="filters" data-filter-color="oe_green">Green</we-button>
-                </we-collapse>
-            </we-collapse-area>
-            <we-collapse-area>
-                <we-toggler>Text Size</we-toggler>
-                <we-collapse>
-                    <we-button data-cover-opt="text_size" data-select-class="o_wblog_cover_font_hero">Hero</we-button>
-                    <we-button data-cover-opt="text_size" data-select-class="o_wblog_cover_font_huge">Huge</we-button>
-                    <we-button data-cover-opt="text_size" data-select-class="o_wblog_cover_font_big">Big</we-button>
-                    <we-button data-cover-opt="text_size" data-select-class="">Regular</we-button>
-                    <we-button data-cover-opt="text_size" data-select-class="o_wblog_cover_font_small">Small</we-button>
-                    <we-button data-cover-opt="text_size" data-select-class="o_wblog_cover_font_tiny">Tiny</we-button>
-                </we-collapse>
-            </we-collapse-area>
-            <we-collapse-area>
-                <we-toggler>Text Alignment</we-toggler>
-                <we-collapse>
-                    <we-button data-cover-opt="text_align" data-select-class="">Left</we-button>
-                    <we-button data-cover-opt="text_align" data-select-class="text-center">Centered</we-button>
-                    <we-button data-cover-opt="text_align" data-select-class="text-right">Right</we-button>
-                </we-collapse>
-            </we-collapse-area>
-        </div>
-    </xpath>
 </template>
 
 <!-- Snippets' Options -->
diff --git a/addons/website_blog/views/website_blog_components.xml b/addons/website_blog/views/website_blog_components.xml
index 689cbd1ed43..f67a86bf440 100644
--- a/addons/website_blog/views/website_blog_components.xml
+++ b/addons/website_blog/views/website_blog_components.xml
@@ -43,22 +43,6 @@
     </t>
 </template>
 
-<!-- ======   Template: COVER   ================================================
-============================================================================ -->
-<template id="blog_cover">
-    <div
-        t-att-data-use_size="use_size"
-        t-att-data-use_filters="use_filters"
-        t-att-data-use_text_size="use_text_size"
-        t-att-data-use_text_align="use_text_align"
-        t-attf-class="o_blog_cover_container d-flex flex-column #{use_size and cover_properties.get('resize_class') or ''}  #{use_text_size and cover_properties.get('text_size_class') or ''} #{use_text_align and cover_properties.get('text_align_class') or ''} #{additionnal_classes or ''}">
-
-        <div class="o_blog_cover_component o_blog_cover_image" t-attf-style="background-image: #{cover_properties.get('background-image')};"/>
-        <div t-if="use_filters" t-attf-class="o_blog_cover_component o_blog_cover_filter #{cover_properties.get('background-color')}" t-attf-style="opacity: #{cover_properties.get('opacity', 0.0)};"/>
-        <t t-raw="0"/>
-    </div>
-</template>
-
 <!-- ======   Template: Date Selector   ========================================
 ============================================================================ -->
 <template id="date_selector">
diff --git a/addons/website_blog/views/website_blog_posts_loop.xml b/addons/website_blog/views/website_blog_posts_loop.xml
index 48636aa0c7a..6c0fcb1568d 100644
--- a/addons/website_blog/views/website_blog_posts_loop.xml
+++ b/addons/website_blog/views/website_blog_posts_loop.xml
@@ -181,8 +181,8 @@ according to the enabled options.
        t-attf-class="text-decoration-none d-block #{classes or 'mb-2'}"
        t-att-style="not blog_post.website_published and 'opacity:0.6;'">
 
-        <t t-call="website_blog.blog_cover">
-            <t t-set="cover_properties" t-value="json.loads(blog_post.cover_properties)"/>
+        <t t-call="website.record_cover">
+            <t t-set="_record" t-value="blog_post"/>
             <t t-set="additionnal_classes" t-value="'o_list_cover' + (not opt_blog_cards_design and ' rounded overflow-hidden shadow mb-3' or '')"/>
 
             <t t-if="opt_posts_loop_show_author" t-call="website_blog.post_author">
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 20659dbb592..380a71939eb 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -116,15 +116,14 @@ list of filtered posts (by date or tag).
         <div t-if="first_post or blog" class="container">
             <div class="row py-4">
                 <div t-attf-class="mb-3 mb-md-0 #{'col-md-5' if (not opt_blog_list_view and not opt_blog_sidebar_show) else 'col-md-6'}">
-                    <t t-call="website_blog.blog_cover">
-                        <t t-if="blog" t-set="cover_properties" t-value="json.loads(blog.cover_properties)"/>
-                        <t t-else="first_post" t-set="cover_properties" t-value="json.loads(first_post.cover_properties)"/>
+                    <t t-call="website.record_cover">
+                        <t t-set="_record" t-value="blog or first_post"/>
                         <t t-set="additionnal_classes" t-value="'h-100 py-5 py-md-0 overflow-hidden rounded shadow'"/>
                     </t>
                 </div>
                 <div t-att-class="'col-md-7' if (not opt_blog_list_view and not opt_blog_sidebar_show) else 'col-md-6'">
                     <div class="container position-relative h-100 d-flex flex-column justify-content-around pt-1 pb-2">
-                        <div t-attf-class="o_wblog_post_title o_wblog_cover_font_regular #{'js_tweet' if opt_blog_post_select_to_tweet else ''} #{'js_comment' if opt_blog_post_select_to_comment else ''}">
+                        <div t-attf-class="o_wblog_post_title #{'js_tweet' if opt_blog_post_select_to_tweet else ''} #{'js_comment' if opt_blog_post_select_to_comment else ''}">
                             <t t-if="blog">
                                 <span t-field="blog.name" class="h1 d-block" placeholder="Blog's Title"/>
                                 <div t-field="blog.subtitle" class="h4" placeholder="Subtitle"/>
@@ -157,16 +156,15 @@ list of filtered posts (by date or tag).
 <!-- (Option) Blog: Show latest-post as top banner : 'Full Width' design -->
 <template id="opt_blog_cover_post_fullwidth_design" name="Full-Width Cover" inherit_id="website_blog.opt_blog_cover_post" active="True" customize_show="True">
     <xpath expr="//div[hasclass('container')]" position="replace">
-        <t t-call="website_blog.blog_cover">
-            <t t-if="blog" t-set="cover_properties" t-value="json.loads(blog.cover_properties)"/>
-            <t t-else="first_post" t-set="cover_properties" t-value="first_post and json.loads(first_post.cover_properties)"/>
+        <t t-if="blog or first_post" t-call="website.record_cover">
+            <t t-set="_record" t-value="blog or first_post"/>
             <t t-set="use_filters" t-value="True"/>
             <t t-set="use_text_size" t-value="True"/>
             <t t-set="use_text_align" t-value="True"/>
-            <t t-set="additionnal_classes" t-value="'o_wblog_post_page_cover o_wblog_has_cover cover_auto'"/>
+            <t t-set="additionnal_classes" t-value="'o_wblog_post_page_cover o_record_has_cover cover_auto'"/>
 
-            <div t-if="first_post or blog" class="container position-relative h-100 d-flex flex-column justify-content-around">
-                <div t-attf-class="o_wblog_post_title o_wblog_cover_font_regular #{'js_tweet' if opt_blog_post_select_to_tweet else ''} #{'js_comment' if opt_blog_post_select_to_comment else ''}">
+            <div class="container position-relative h-100 d-flex flex-column justify-content-around">
+                <div t-attf-class="o_wblog_post_title #{'js_tweet' if opt_blog_post_select_to_tweet else ''} #{'js_comment' if opt_blog_post_select_to_comment else ''}">
                     <div t-if="not date and not tag and not blog" class="h4 bg-gamma px-2 d-inline-block rounded-sm">Latest</div>
                     <a t-if="not blog and first_post" t-attf-href="/blog/#{slug(first_post.blog_id)}/post/#{slug(first_post)}" t-att-title="first_post.name" class="text-white text-decoration-none">
                         <div t-field="first_post.name" id="o_wblog_post_name" t-att-data-blog-id="first_post.id" placeholder="Blog Post Title"/>
@@ -233,15 +231,15 @@ list of filtered posts (by date or tag).
 
         <section id="o_wblog_post_top">
             <div id="title" class="blog_header" t-ignore="True">
-                <t t-call="website_blog.blog_cover">
-                    <t t-set="cover_properties" t-value="json.loads(blog_post.cover_properties)"/>
+                <t t-call="website.record_cover">
+                    <t t-set="_record" t-value="blog_post"/>
                     <t t-set="use_filters" t-value="True"/>
                     <t t-set="use_size" t-value="True"/>
                     <t t-set="use_text_size" t-value="True"/>
                     <t t-set="additionnal_classes" t-value="'o_wblog_post_page_cover'"/>
 
                     <div class="container text-center position-relative h-100 d-flex flex-column flex-grow-1 justify-content-around">
-                        <div t-attf-class="o_wblog_post_title o_wblog_cover_font_regular #{opt_blog_post_select_to_tweet and 'js_tweet'} #{opt_blog_post_select_to_comment and 'js_comment'}">
+                        <div t-attf-class="o_wblog_post_title #{opt_blog_post_select_to_tweet and 'js_tweet'} #{opt_blog_post_select_to_comment and 'js_comment'}">
                             <div t-field="blog_post.name" id="o_wblog_post_name" data-oe-expression="blog_post.name" t-att-data-blog-id="blog_post.id" placeholder="Blog Post Title"/>
                             <div t-field="blog_post.subtitle" id="o_wblog_post_subtitle"  placeholder="Subtitle"/>
                         </div>
@@ -348,9 +346,9 @@ list of filtered posts (by date or tag).
                     </div>
                 </div>
 
-                <t t-call="website_blog.blog_cover">
+                <t t-call="website.record_cover">
+                    <t t-set="_record" t-value="blog_post"/>
                     <t t-set="additionnal_classes" t-value="'o_wblog_post_page_cover o_wblog_post_page_cover_regular rounded shadow overflow-hidden'"/>
-                    <t t-set="cover_properties" t-value="json.loads(blog_post.cover_properties)"/>
                     <t t-set="use_size" t-value="True"/>
                 </t>
             </div>
@@ -418,8 +416,8 @@ list of filtered posts (by date or tag).
                                 </a>
                             </div>
                             <a t-att-href="'/blog/' + slug(next_post.blog_id) + '/post/' + slug(next_post)" t-att-title="'Read next' + next_post.name" class="w-25">
-                                <t t-call="website_blog.blog_cover">
-                                    <t t-set="cover_properties" t-value="json.loads(next_post.cover_properties)"/>
+                                <t t-call="website.record_cover">
+                                    <t t-set="_record" t-value="next_post"/>
                                     <t t-set="additionnal_classes" t-value="'rounded shadow-sm overflow-hidden h-100'"/>
                                 </t>
                             </a>
@@ -429,21 +427,22 @@ list of filtered posts (by date or tag).
             </t>
             <t t-else="">
                 <div id="o_wblog_next_container" class="d-flex flex-column">
-                    <t t-call="website_blog.blog_cover">
-                        <t t-set="cover_properties" t-value="json.loads(next_post.cover_properties)"/>
+                    <t t-call="website.record_cover">
+                        <t t-set="_record" t-value="next_post"/>
+                        <t t-set="_cp" t-value="json.loads(_record.cover_properties)"/>
                         <t t-set="use_filters" t-value="True"/>
-                        <t t-set="additionnal_classes" t-value="'o_wblog_post_page_cover o_wblog_post_page_cover_footer o_wblog_has_cover'"/>
+                        <t t-set="additionnal_classes" t-value="'o_wblog_post_page_cover o_wblog_post_page_cover_footer o_record_has_cover'"/>
 
                         <a id="o_wblog_next_post_info" class="d-none"
-                           t-att-data-size="cover_properties.get('resize_class')"
-                           t-att-data-text="cover_properties.get('text_size_class')"
+                           t-att-data-size="_cp.get('resize_class')"
+                           t-att-data-text="_cp.get('text_size_class')"
                            t-att-data-url="'/blog/' + slug(next_post.blog_id) + '/post/' + slug(next_post) + '?anim'"/>
 
-                        <t t-set="next_cover_is_full" t-value="'cover_full' in cover_properties.get('resize_class')"/>
-                        <t t-set="next_cover_is_auto" t-value="'cover_auto' in cover_properties.get('resize_class')"/>
+                        <t t-set="next_cover_is_full" t-value="'cover_full' in _cp.get('resize_class')"/>
+                        <t t-set="next_cover_is_auto" t-value="'cover_auto' in _cp.get('resize_class')"/>
 
                         <div class="container text-center position-relative h-100 d-flex flex-column flex-grow-1 justify-content-around">
-                            <div t-attf-class="o_wblog_post_title o_wblog_cover_font_regular">
+                            <div t-attf-class="o_wblog_post_title">
                                 <div t-field="next_post.name" id="o_wblog_post_name" t-att-data-blog-id="next_post.id" placeholder="Blog Post Title"/>
                                 <div t-field="next_post.subtitle" id="o_wblog_post_subtitle"  placeholder="Subtitle"/>
                             </div>
@@ -501,8 +500,8 @@ list of filtered posts (by date or tag).
 <template id="s_latest_posts_list_template">
     <div t-foreach="posts" t-as="p" class="d-flex col-12 mt-3 s_latest_posts_post">
         <a class="s_latest_posts_post_cover flex-grow-0 flex-shrink-0 align-self-baseline position-relative" t-attf-href="/blog/#{p.blog_id.id}/post/#{p.id}" t-att-title="'Read' + p.name">
-            <t t-call="website_blog.blog_cover">
-                <t t-set="cover_properties" t-value="json.loads(p.cover_properties)"/>
+            <t t-call="website.record_cover">
+                <t t-set="_record" t-value="p"/>
                 <t t-set="additionnal_classes" t-value="'w-100 h-100 bg-200 position-absolute'"/>
 
                 <div class="s_latest_posts_loader d-flex align-items-center justify-content-center bg-200">
@@ -522,8 +521,8 @@ list of filtered posts (by date or tag).
 <template id="s_latest_posts_big_picture_template">
     <figure t-foreach="posts" t-as="p" class="col-12 col-md-6 col-xl-4 my-3 s_latest_posts_post">
         <a class="s_latest_posts_post_cover position-relative d-flex flex-column shadow-sm overflow-hidden rounded text-decoration-none" t-attf-href="/blog/#{p.blog_id.id}/post/#{p.id}">
-            <t t-call="website_blog.blog_cover">
-                <t t-set="cover_properties" t-value="json.loads(p.cover_properties)"/>
+            <t t-call="website.record_cover">
+                <t t-set="_record" t-value="p"/>
                 <t t-set="use_filters" t-value="True"/>
                 <t t-set="additionnal_classes" t-value="'h-100 w-100 bg-600 position-absolute'"/>
             </t>