Ihr habt es sicher auch schon erlebt, da baut ihr in eure DIVI Webseite euer Blog Modul ein und dann sieht das komisch aus, weil jede Vorschau eine andere Höhe hat. Mal hats nur 2 Zeilen Text drin und mal ist das Bild in einem falschen Format und zack sieht alles sehr unruhig aus.

Im heutigen Video zeige ich euch wie ihr so einen Ausgleich für alle Vorschau einrichten könnt, so dass alles die gleiche Höhe hat, egal wie gross das Bild ist oder lang der Text ist.

Ist es eine perfekte Lösung für alles? Nein aber für 95% der Fälle ist es eine gute Lösung.

Video

CSS Klasse

cb_diviblog_hoehe

Javascript

<script>
	(function ($) {
		var pa_equalize_button_height = "true";
 
		if (pa_equalize_button_height == "false") {
			function cb_blog_hoehe_ausgleichen(blog) {
				var articles = blog.find('article');
				var heights = [];
 
				articles.each(function () {
					var height = 0;
					height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					height += $(this).find('.entry-title').outerHeight(true);
					height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
					height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;
 
					heights.push(height);
				});
 
				var max_height = Math.max.apply(Math, heights);
 
				articles.each(function () {
					$(this).height(max_height);
				});
			}
		} else {
			function cb_blog_hoehe_ausgleichen(blog) {
				var articles = blog.find('article');
				var heights = [];
				var btnheights = [];
 
				articles.each(function () {
					var height = 0;
					var btnheight = 0;
					var basebtnmargin = 20;
 
					height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					height += $(this).find('.entry-title').outerHeight(true);
					height += $(this).find('.post-meta').outerHeight(true);
					height += $(this).find('.post-content').outerHeight(true);
 
					btnheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					btnheight += $(this).find('.entry-title').outerHeight(true);
					btnheight += $(this).find('.post-meta').outerHeight(true);
					btnheight += $(this).find(".post-content p").outerHeight(true);
					btnheight += basebtnmargin;
 
					heights.push(height);
					btnheights.push(btnheight);
 
				});
 
				var max_height = Math.max.apply(Math, heights);
				var max_btn_height = Math.max.apply(Math, btnheights);
 
				articles.each(function () {
					$(this).height(max_height);
 
					var eachheight = 0;
					var eachbasebtnmargin = 20;
					eachheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
					eachheight += $(this).find('.entry-title').outerHeight(true);
					eachheight += $(this).find('.post-meta').outerHeight(true);
					eachheight += $(this).find(".post-content p").outerHeight(true);
					eachheight += eachbasebtnmargin;
 
					var requiredbtnmargin = (max_btn_height - eachheight) + eachbasebtnmargin;
					$(this).find(".more-link").css("margin-top", requiredbtnmargin + "px");
				});
			}
		}
 
		$(document).ready(function () {
			$(window).resize(function () {
				if ($(this).width() >= 768) {
 
					$(".cb_diviblog_hoehe article").each(function () {
						$(this).removeClass("cb-auto-height");
						$(this).find(".more-link").removeClass("cb-auto-margin");
					})
					$('.cb_diviblog_hoehe').each(function () {
						cb_blog_hoehe_ausgleichen($(this));
					});
 
					$('.cb_diviblog_hoehe').each(function () {
						var pa_blog = $(this);
 
						cb_blog_hoehe_ausgleichen(pa_blog);
 
						var observer = new MutationObserver(function (mutations) {
							cb_blog_hoehe_ausgleichen(pa_blog);
						});
 
						var config = {
							subtree: true,
							childList: true
						};
 
						observer.observe(pa_blog[0], config);
					});
 
					$(document).ajaxComplete(function () {
						$('.cb_diviblog_hoehe').imagesLoaded().then(function () {
							$('.cb_diviblog_hoehe').each(function () {
								cb_blog_hoehe_ausgleichen($(this));
							});
						});
					});
 
					$.fn.imagesLoaded = function () {
						var $imgs = this.find('img[src!=""]');
						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);
					}
				} else {
					$(".cb_diviblog_hoehe article").each(function () {
						$(this).addClass("cb-auto-height");
						$(this).find(".more-link").addClass("cb-auto-margin");
					})
				}
			});
		});
	})(jQuery); 
</script>