Si vous avez un blog sur WordPress et que vous utilisez le thème Divi, alors vous avez probablement des extraits d’articles de longueurs inégales. Ce n’est pas très esthétique, voici donc une solution pour les mettre à la même hauteur !
En utilisant le module « Blog » du thème builder, vous avez probablement ce résultat là :
Heureusement, avec un peu de Javascript, nous pouvons faire en sorte d’égaliser les hauteurs des cartes de blog pour avoir ce résultat là :
Comment faire ?
Tout d’abord, insérez la classe CSS » et_blog_grid_equal_height » dans le module Blog de votre page. Cela peut-être dans votre page d’accueil, votre page de blog ou vos pages d’articles via le thème builder.
Puis insérez tout simplement ce bout de code dans la balise <body > de votre thème. Allez dans Divi > Options du thème > Intégration :
<script>
/* Blog Module equal height grid boxes */
(function($) {
$(document).ready(function() {
$(window).resize(function() {
$('.et_blog_grid_equal_height').each(function() {
equalise_articles($(this));
});
});
$('.et_blog_grid_equal_height').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).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() {
$('.et_blog_grid_equal_height').imagesLoaded().then(function() {
$('.et_blog_grid_equal_height').each(function(){
equalise_articles($(this));
});
});
});
$.fn.imagesLoaded = function() {
var $imgs = this.find('img[src!=&quot;&quot;]');
var dfds = [];
if (!$imgs.length) {
return $.Deferred().resolve().promise();
}
$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);
</script>
Et voilà, c’est terminé ! Vous avez maintenant une ligne d’articles qui ont la longueur du plus long. Dites-moi en commentaire si ça a fonctionné pour vous !
Source:
Bonsoir,
Ravie de trouver un tuto clair et précis pour harmoniser la taille de mes grilles de blog. Mais bouh… ça ne fonctionne pas chez moi sur mon site en cours de travaux… j’ai pourtant tout bien vérifié…
Bonjour Alix, les caractères spéciaux de mon snippet n’étaient pas corrects, c’est maintenant corrigé. Essayez de nouveau et dites-moi si ça marche mieux!
Bon dévelopement.