Recepty na divi

Wystarczy w zaawansowanych ustawieniach modułu blog dodać klasę css o nazwie „bloggrid”, a następnie dodać poniższy kod do custom style, możesz zrobić to w ustawieniach divi w zakładce „opcje szablonów graficznych”:

/*Equalize Blog Columns*/
.bloggrid .et_pb_salvattore_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.bloggrid article {
margin-bottom: 20px !important;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

.bloggrid .post-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.bloggrid .column {
margin-bottom: 20px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

Niestety recepta ta nie działa w blogach z 3-kolumnami, wtedy trzeba zastosować jquery. Co dokładnie trzeba zrobić? Do modułu naszego bloga w ustawieniach zaawansowanych dodajemy nową klasę CSS "sensei-grid", a następnie dodajemy do skryptu w ustawieniach divi (integracje) poniższy kod javascript w klamerkach < script> i </ script> (bez spacji):

(function ($) {
$(document).ready(function () {

$( window ).resize(function() {
$(".sensei-grid").each(function(){
equalise_articles($(this));
});
});

$(".sensei-grid").each(function(){
var blog = $(this);
equalise_articles($(this));

var observer = new MutationObserver(function (mutations) {
equalise_articles(blog);
});

var config = { subtree: true, childList: true };
observer.observe(blog[0], config);
});

function equalise_articles(blog){
var articles = blog.find("article");

var heights = [];

articles.each(function(){
var height = 0;
//height += $(this).outerHeight() - $(this).height();
height += $(this).find(".et_pb_image_container").outerHeight(true);
height += $(this).find(".entry-title").outerHeight(true);
height += $(this).find(".post-meta").outerHeight(true);
height += $(this).find(".post-content").outerHeight(true);
heights.push(height);
});

var max_height = Math.max.apply(Math,heights);

articles.each(function(){
$(this).height(max_height);
});
}

$(document).ajaxComplete(function(){
$(".sensei-grid").imagesLoaded().then(function(){
console.log("images loaded");
$(".sensei-grid").each(function(){
equalise_articles($(this));
});
});
});

$.fn.imagesLoaded = function () {
var $imgs = this.find('img[src!=""]');
if (!$imgs.length) {return $.Deferred().resolve().promise();}
var dfds = [];
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function(){dfd.resolve();}
img.onerror = function(){dfd.resolve();}
img.src = this.src;

});
return $.when.apply($,dfds);
}

});
})(jQuery);

Cały artykuł na ten temat dostępny tutaj.