pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] website(_blog): make most of the cover_properties system generic

Browse Source 
This commit moves most of the logic of cover edition to website. This
will allow to define cover on other non-blog models, like events.

Note: this also "accidentally" fixes a crash during rendering of the
blog page when there is no blog or post.

Part of https://github.com/odoo/odoo/pull/37009
task-2043872
This commit is contained in:
qsm-odoo
2019-09-27 11:49:53 +00:00
parent bb017e64d4
commit 08cc073369
15 changed files with 345 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+135
View File
@@ -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 || '';
},
});
});
addons/website/static/src/js/editor/wysiwyg_multizone.js
+51
View File
@@ -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);
},
/**
addons/website/static/src/scss/website.scss
+13
View File
@@ -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;
}
}
addons/website/views/snippets.xml
+61
View File
@@ -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>
addons/website/views/website_templates.xml
+15
View File
@@ -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">
addons/website_blog/data/website_blog_data.xml
+1 -1
View File
@@ -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">
addons/website_blog/data/website_blog_demo.xml
+9 -9
View File
@@ -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.
addons/website_blog/static/src/js/s_latest_posts_frontend.js
+2 -2
View File
@@ -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);
addons/website_blog/static/src/js/website_blog.editor.js
+14 -189
View File
@@ -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);
},
});
});
addons/website_blog/static/src/js/website_blog.js
+1 -1
View File
@@ -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
addons/website_blog/static/src/scss/website_blog.scss
+13 -28
View File
@@ -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;
}
}
addons/website_blog/views/snippets.xml
-65
View File
@@ -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 -->
addons/website_blog/views/website_blog_components.xml
-16
View File
@@ -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">
addons/website_blog/views/website_blog_posts_loop.xml
+2 -2
View File
@@ -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">
addons/website_blog/views/website_blog_templates.xml
+28 -29
View File
@@ -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>