Illu resize img blog

Centrer automatiquement les images d'articles du blog

Sur e-monsite, les images d'illustrations du blog prennent la taille de l'image. Voici un trick pour qu'elles aient toutes la même taille et qu'elles soient centrées !

Exemple avant / après du recadrage

Contrôler la taille des images

Attention, ce trick est optimisé pour les versions Pro d'e-monsite !

Dans une définition logique, lorsque l'on importe une image d'illustration dans e-monsite, celle ci prend la même taille. Le CMS ne peut pas prendre la décision pour vous de recadrer l'image. :)
Cependant dans une réflexion esthétique, contrôler dynamiquement la taille des images sans se soucier de l'import est vraiment un gain de temps (et très pratique !).

Pour effectuer ce traitement on aura besoin de CSS (pour définir la hauteur que l'on souhaite voir apparaitre) et du JavaScript pour calculer le centre de l'image et nous l'aligner !
( Ce trick est utilisé sur EMS-Tricks ! Voir l'exemple ici )

Gérer la hauteur visible de l'image

Pour cela, nous allons utiliser du CSS !
Coller ce bout de CSS dans les zones faites pour dans e-monsite.

[data-addon="blog"] .item-img {
    overflow: hidden;
    height: 150px; /*Ici nous définissons la hauteur visible de l'image*/
    width: 100%;
    position: relative;
    display: block;
}

Modifier le height afin d'adapter votre hauteur.

Centrer verticalement l'image

Pour la suite, c'est le JavaScript qui va calculer la hauteur de notre image, son centre, et nous l'afficher !

Voici le code :

$(document).ready(function() {

$('.media-object').children().addClass("item-img");

    var imageHeight, wrapperHeight, overlap, nodes = document.querySelectorAll('.item-img');
    
    $(window).on("load resize", centerImage);
    
    function centerImage() {  
        for (var i=0; i<nodes.length; i++) {
            container = $(nodes[i]);
            imageHeight = container.find('img').height();
            wrapperHeight = container.height();
            overlap = (wrapperHeight - imageHeight) / 2;
            container.find('img').css('margin-top', overlap);   
        }
    }

    for (var i=0; i<nodes.length; i++) {
        var el = $(nodes[i]);
        if (el.addEventListener) { 
            el.addEventListener("webkitTransitionEnd", centerImage, false);
            el.addEventListener("transitionend", centerImage, false);
            el.addEventListener("oTransitionEnd", centerImage, false);
        }
    }    
    
});    

Pour appliquer ce script, on utilise l'événement on('load') qui attend que toutes les ressources de la page soient chargées avant de se lancer (pour ne pas centrer une image qui ne serai pas finie de charger par exemple).

Cependant, si des requêtes mettent du temps à arriver (widget externes etc.), l'image ne se centrera que lorsque tout sera présent en termes de contenu.


Coller ce script JavaScript dans les zones éditables afin qu'il agisse sur toutes les pages du site ! (recommandé)

Ou entre des balises <script></script> dans une ligne pour n'affecter que la page en question.

C'était le premier

Voilà, notre premier trick est fini ! Dites nous si cela vous a aidé ou posez nous vos questions ici !

javascript css articles blog image centrer