fbpx
Blog & Galerie Divi : Recadrage des images

Empêcher Divi de recadrer les images des modules Blog et Galerie

Dans ce nouveau tuto WordPress Divi, je vous montre comment empêcher Divi de recadrer automatiquement les images présentées du Blog Divi (présentation Grille) ainsi que les images de module Galerie (présentation grille également).

Divi recadre automatiquement ces images. L’explication est simple, Elegant Theme a fait ce choix pour une question logique d’esthétique, c’est-à-dire que peu importe le format et le ratio de l’image utilisée, automatiquement l’image sera recadrée afin de conserver une harmonie de format entre toutes les images.
Un recadrage avec un ratio 16/10 est appliqué pour les images de l’affichage grille du Blog soit des images au format paysage de 400 x 250 pixels.
De la même manière, un recadrage pour les images de la galerie avec un ratio un peu différent de 16/11 est appliqué ici  avec de images de 400 x 284 pixels.

Il peut être intéressant d’empêcher ce recadrage si vous avez comme moi des images avec un ratio différent comme 16/9. Cela empêchera que vos images soient rognées.

Licence Divi
Code Promo Divi Supreme
.

Empêcher le recadrage des images présentées du module Blog (affichage grille) 

    Pour cela nous devons ajouter du code dans le fichier functions.php

    Deux solutions sans risques sont possibles :
    – Soit vous ajoutez ces lignes au fichier functions.php de votre thème enfant.

    – Soit vous utilisez le plugin « Code Snippets » qui va vous permettra d’ajouter votre code PHP en toute sécurité. C’est cette solution que nous retiendrons ici.

    Pour dire 2 mots sur ce code qui empêche le recadrage, la parade consite simplement à  augmenter les valeurs des tailles de vignettes.
    En plaçant la largeur et la hauteur à 10 000 pixels, vous serez ainsi certain que vos images ne seront jamais recadrées à moins que vous importiez une image de plus de 10.000 pixels, ce qui est peu probable.

    Rendez-vous ensuite dans le menu WordPress dans « Extensions > Ajouter » puis rechercher l’extension « Code Snippets ». Une fois l’extension installée et activée, ajouter  le code suivant :

    Code Snippets
    Ajout du code

    // Debut arret recadrage images du module Divi Blog
    function ld_blog_crop_image_width($width) {
    return 10000;
    }
    function ld_blog_crop_image_height($height) { return 10000;
    }
    add_filter( ‘et_pb_blog_image_width’, ‘ld_blog_crop_image_width’ );
    add_filter( ‘et_pb_blog_image_height’, ‘ld_blog_crop_image_height’ );
    // Fin arret recadrage images du module Divi Blog

    Empêcher le recadrage des images présentées du module Galerie (affichage grille)

    Même procédure pour le module Galerie afin d’empêcher le recadrage automatique des images.
    Retourner dans « Code Snippets » et ajouter le code suivant :

    Presto Player lecteur vidéo WordPress
    Thinkific one month free

    // Debut arret recadrage images du module Divi Galerie
    function ld_gallery_crop_image_width($size) {
    return 10000;
    } function ld_gallery_crop_image_height($size) {
    return 10000;
    }
    add_filter( ‘et_pb_gallery_image_width’, ‘ld_gallery_crop_image_width’ ); add_filter( ‘et_pb_gallery_image_height’, ‘ld_gallery_crop_image_height’ );
    // Fin arret recadrage images du module Divi Galerie

    Vous serez peut-être intéressé aussi par…

    Hébergements web, quels sont les différents types ?

    Hébergements web, quels sont les différents types ?

    Quels sont les différents types d’hébergements proposés pour un site Internet ?  Mon hébergement est-il adapté à mon trafic web ? Ce sont des questions de ce type que l’on se pose lorsque l’on veut créer un site Internet et le mettre en ligne.

    read more
    Installer WordPress : Où et Comment ?

    Installer WordPress : Où et Comment ?

    Ce tutoriel WordPress est destiné aux débutants qui veulent créer un site web WordPress mais qui ne savent pas vraiment par où commencer.
    Si c’est votre cas, ce tutoriel est pour vous ! Je vous explique ici où et comment installer facilement WordPress. Je vous présente o2switch  l’hébergeur français de qualité.

    read more

    Les bons plans Alpa14 😉

    👉 Divi : Le meilleur Thème et Page Builder WordPress, -10% sur votre licence ! 💗
    👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 » 💗
    👉 o2switch : L’hébergement français mutualisé de qualité (5€HT/mois en illimité + nom de domaine compris)
    👉 Hostinger : Les hébergements mutualisés, VPS et Cloud de qualité. Tarifs compétitifs. -7% avec le code « ALPA14 » 💗
    👉 Amelia : Le plugin de bookink (Prise de rendez-vous et réservations) avec modules Divi ! -10% avec le code Promo « E96DB94C » ! 💗
    👉 Presto Player
    : Le meilleur lecteur vidéo pour votre site WordPress !
    👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
    👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
    👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
    👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
    👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
    👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
    👉 Inleed : L’hébergeur suédois performant et de qualité 

    👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
    👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
    👉 duoLogo : Réalisez un logo pro, formule gratuite
    👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
    👉 Private Internet Access
    : Un VPN de qualité, protégez votre connexion Internet

     

    👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
    Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois moins cher 👍.

    0 Comments

    Submit a Comment

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *