Divi blogelementer vises i forskellige størrelser

Divi-temaet kommer med et indbygget blogmodul, der kan vise billede, metadata og uddrag af dine indlæg sat op hvor de enkelte blogelementer vises i fuld bredde eller i et gitter. Vælger du at få vist dine indlæg sat op som elementer i et gitter, løber du hurtigt ind i et “skævt” layout, da Divi ikke tager hensyn til fx længden af dine uddrag eller størrelsen på det fremhævede billede. Resultatet er desværre ofte, at dit gitter med blogelementerne ret hurtigt kommer til at ligne en rodebutik.

Skriv tekstuddrag og lav fremhævede billeder i præcis samme

Hvis du er knivskarp til at styre din tekstlængde og størrelsen på de fremhævede billeder, kan det være du kan være heldig at løse problemet på den måde. Men jeg vil dog mene at det arbejde du kommer til at lægge i at alt har samme størrelse, ned til enkelte pixels og mængden af tegn i din tekst, kommer til at dræbe din skabertrang hurtigere end hvad godt er.

Hvad med at skifte størrelsen på alle blogelementerne med CSS?

Det kan være fristende at bare give alle elementer en fast størrelse, men hvis længden på dine dine tekstuddrag er forskellige eller dine fremhævede billeder har forskellig størrelse, kan det være lidt en gætteleg at finde frem til den rigtige størrelse. Og hvis du vælger at lave nogle ændringer, skal du forfra med detektivarbejdet.

Nej, brug jQuery til at lave ens størrelser på blogelementerne

En god metode (den bedste jeg er stødt på indtil videre) til at sørge for at alle Divi blogelementer i blogmodulet automatisk får samme størrelse – uanset mængden af metadata, tekst og størrelsen på de fremhævede billeder – er at bruge et lille script skrevet i jQuery.

Scriptet, du finder herunder, tjekker alle blog-elementernes størrelse, finder det største og ændrer derefter størrelsen på alle de andre elementer, så du ender med et blogmodul, hvor alle elementerne har samme størrelse. Det ser – efter min mening – noget bedre ud end den måde Divi som udgangspunkt bare smider elementerne op efter hinanden, uden at skænke layoutet en tanke.

Lav ens størrelse på elementerne i Divi – trin for trin

For at få styr på størrelsen af elementerne skal du bare følge disse få trin, og derefter læne dig tilbage og nyde resultatet.

  1. Åben indstillingerne for modulet
    Åben indstillingerne for det blog-modul, hvor du vil gøre elementerne samme størrelse.
  2. Giv blog-modulet en CSS-klasse
    For at få ens størrelse på blogelementer i Divi skal du tildele blogmodulet en CSS-klasse
    Gå til fanen Avanceret og under punktet “CSS ID og klasser” skriver du bloggrid.
  3. Luk og gem
    Luk indstillingerne og luk og gem siden, så du vender tilbage til WordPress-kontrolpanelet.
  4. Indsæt scriptet i <head> med Divi
    Scriptet til ens størrelse på Divi blogelementer sættes ind i i Divi's temaindstillinger
    Under Divi vælger du Temaindstillinger og går til Integration-fanen. Under punktet “Tilføj kode til < head > på din blog” indesætter du jQuery-scriptet og gemmer indstillingerne.
  5. Tjek at det virker
    Åben siden med blog-modulet du gav CSS-klassen bloggrid før, og kontrollér at gitter-elementerne nu har samme størrelse.

jQuery-script til at lave ens størrelser på elementerne i blogmodulet

Scriptet sættes ind i <head> via Divis indstillinger, og kan genbruges til flere blogmoduler på tværs af dit website, så længe du giver modulerne CSS-klassen bloggrid.

Kopier jQuery-koden herunder

Dobbeltklik på koden for lettere at kopiere den.

<script>
(function ($) {
    $(document).ready(function () {

        $( window ).resize(function() {
            $(".bloggrid").each(function(){
                equalise_articles($(this));
            });
        });

        $(".bloggrid").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(){
            $(".bloggrid").imagesLoaded().then(function(){
                $(".bloggrid").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);
</script>

    Emner omtalt i denne artikel

    Her kan du læse mere om de emner, jeg har omtalt i denne artikel:
  • jQuery
    jQuery er et JavaScript-bibliotek, der gør det hurtigt og nemt at manipulere dokumenter og lave forskellige handlinger.
  • Divi
    Divi er et tema til WordPress med en avanceret visuel sidebygger, der gør det nemt at skabe avancerede layouts.
  • WordPress
    WordPress er verdens mest brugte software til lave blogs og hjemmesider, og tilbydes som Open Source.