Este es un tema espinoso: el tamaño de las imágenes de Divi. De hecho, no es sólo sobre Divi, todos los temas de WordPress uso tamaños de imagen específicos y muchos usuarios pueden sentirse frustrados en algún momento.
Cuando doy Divi training y WordPress, hay muchas preguntas que vuelven cada vez:
- ¿Por qué mi imagen está cortada – cortada?
- ¿Por qué mi imagen de retrato aparece en formato paisajístico?
- ¿Por qué se acerca mi imagen?
Sé que es bastante molesto. Entonces habrá dos soluciones para remediar esto:
- o te doblas a tu tema y usas el formato adecuado para que tu imagen no sea no se rompió inadvertidamente.
- o bien usted realiza algunos cambios así que es el tema que cumple con sus requisitos.
Apuesto a que prefieres la segunda opción, ¿no? En este artículo, abordaremos todos estos puntos. Aquí está el programa:
- 1. ¿Cómo gestiona WordPress sus imágenes?
-
2. ¿Cómo administra Divi tus imágenes?
- Formato de imagen #1: y-pb-post-main-image
- Formato de imagen n°2 : et-pb-post-main-image-fullwidth
- Formato de imagen n°3 : et-pb-portfolio-image
- Formato de imagen #4: y-pb-portfolio-module-image
- Formato de imagen n°5 : y-pb-portfolio-image-single
- Formato de imagen n°6: y-pb-gallery-module-image-portrait
- Formato de imagen n°7: y-pb-post-main-image-fullwidth-large
- 3. ¿Cómo obtener imágenes correctas manteniendo el tamaño de las imágenes de Divi?
- 4. ¿Cómo cambio el tamaño de las imágenes de Divi para personalizar su sitio?
- 5. Tabla sumaria del tamaño de la imagen de Divi
1. ¿Cómo gestiona WordPress sus imágenes?
Primero, tendrás que entender lo que hace WordPress cuando descargas una imagen en la biblioteca de medios.
Por ejemplo, descarga una imagen de una dimensión de 1280px * 720px en tu biblioteca = título este es el formato original de su imagen.
Ahora, si usted mira sus archivos del sitio, vía FTP (Filezilla), en el árbol www √ wp-content > uploads > year folder Carpeta mensual, usted se dará cuenta de que WordPress ha multiplicado su imagen en 5, 6, 7 o 8 archivos o incluso más! Esto es lo que llamamos THUMBNAILS or VIGNETTES.
¿Aún no usas a Divi? Aquí están 10 razones para optar por este tema !
Sin embargo, si usted entra en su administración de WordPress, en la pestaña Ajustes Media sólo verás 3 formatos de miniatura : tamaño de la miniatura, tamaño mediano y tamaño grande.
Estos tres formatos son los formatos estándar que necesita WordPress (por ejemplo, para mostrar miniaturas de sus medios en la biblioteca).
¿De dónde vienen las otras miniaturas? ¡Ese es el tema por supuesto! Su tema también necesita miniaturas para trabajar. Cada tema ofrece diferentes visuales para que cada tema necesite diferentes formatos de imagen.
¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"
2. ¿Cómo administra Divi tus imágenes?
Como acabamos de ver, WordPress necesita 3 formatos de imagenpero Tema DiviEn cuanto a él, necesita 7 formatos adicionalesAquí están:
Formato de imagen #1: y-pb-post-main-image
Este es el formato utilizado para las miniaturas de Módulo BLOG en versión "grid" como en versión "diapo". Este formato se establece con las dimensiones 400px * 250px - o uno ratio de 16:10 ( ligeramente diferente de 16:9).
Esto también debería interesarle: cómo obtener imágenes cuadradas para los módulos Blog, Gallery y Portfolio.
Formato de imagen n°2 : et-pb-post-main-image-fullwidth
Este es el formato utilizado para on imágenes en el frente que aparecen en la parte superior de cada uno de sus artículos, justo debajo del título. Este formato se establece con las dimensiones 1080px * 675px - o siempre uno ratio de 16:10.
Formato de imagen n°3 : et-pb-portfolio-image
Este es el formato utilizado para el Módulo de galería y Módulo Portfolio en modo Grid (Portfolio que está relacionado con el "Proyecto" personalizado post-tipo) cuando está en página de miniatura (con todas las entradas del módulo). Este formato utiliza las dimensiones 400px * 284px – o una relación (un bastardo, lo siento por la palabra) de 100:71.
Formato de imagen #4: y-pb-portfolio-module-image
Este formato utiliza dimensiones 510px * 382px. Más allá de tus imágenes será Groved.
Formato de imagen n°5 : y-pb-portfolio-image-single
Este es el formato utilizado para la imagen en el frente que se muestra en la parte superior de cada uno de sus Proyectos (Portfolio) pero también para imágenes de la página del proyecto del módulo de cartera en modo de pantalla completa.
Este formato utiliza dimensiones de 1080px * 9999px. Generalmente ninguna de sus imágenes tendrá esta dimensión pero esto significa que su imagen no será cortado sólo si tiene una altura superior a 9999px.
En otras palabras, estas imágenes podrán mantener su relación en retrato o paisaje. Estas son las únicas imágenes de Divi que no se someten a cultivo.
Formato de imagen n°6: y-pb-gallery-module-image-portrait
Este es el formato utilizado para el Módulo de galería Posición sobre el modo de retrato. Este formato utiliza dimensiones 400px * 516px - o uno ratio de 100:129.
Formato de imagen n°7: y-pb-post-main-image-fullwidth-large
Este es el formato utilizado para el Módulo "Image in full broad". Utiliza dimensiones 2880px * 1800px. Más allá de estas dimensiones, su imagen será recortada.
3. ¿Cómo obtener imágenes correctas manteniendo el tamaño de las imágenes de Divi?
Ahora que hemos recorrido los diferentes tamaños de las imágenes utilizadas por el tema Divi, esto te ayudará a entender qué imágenes usar si quieres mantener los tamaños ofrecidos por Divi...
3.1 Comprender la importancia de RATIO (o INFORME)
Si nos vemos bien, el más importante para obtener resultados correctos para la visualización de sus imágenes en WordPress, es tener en cuenta la relación. En realidad, dimensiones de poca importancia y esto es a menudo el más difícil de entender. Por ejemplo:
La relación 1:1
Esta relación 1/1 significa que el ancho es equivalente a la altura. Así que una imagen 1000*1000px, una imagen 750px*750px o incluso una imagen 500px*500px siempre tendrá la misma relación.
La relación 3:2
Esta relación significa que el ancho es equivalente a 3/3 y la altura es equivalente a 2/3. Así que una imagen de 900 px de ancho tendrá que tener una altura de 600 px para mantener un ratio de 3:2. Lo mismo para 1800px*1200px imágenes, siempre tendrán un ratio de 3:2.
La relación 4:3
Estas imágenes tendrán un ancho de 4 cuartos para una altura de 3 cuartos. Por ejemplo: 1000px*750px o 1600px*1200px etc...
La relación 16:9
Esto obviamente funciona como otras ratios, excepto que sin duda necesitará una calculadora para hacer este cálculo: [(la anchura de una imagen)/16*9 = altura]. Este formato es ampliamente utilizado en video : 1920px * 1080px.
La relación 16:10
Este formato es menos conocido, está cerca de 16:9 y Este es el formato utilizado por Divi, especialmente para las « imágenes en la portada » de los artículos y miniaturas del « módulo de blog en modo de red ».
El ratio o ratio, no es ni más ni meses que las matemáticas y hay un sitio que le permitirá conocer la relación de sus imágenes simplemente informando el ancho y la altura de este último.
3.2 Redimensionar imágenes antes de descargar en WordPress
Bueno, creo que esto se está aclarando. Sabemos que dimensiones son importantes sólo porque afectan el peso de las imágenes Pero la relación es mucho más importante. Así que si quieres mantener el tamaños de imágenes de Divi, usted tendrá que replantear sus imágenes según la proporción apropiada.
Este artículo probablemente le ayudará: encontrar cómo evitar imágenes recadradas en Divi.
Todo ha sido dicho arriba: si quieres Divi ya no para enmarcar las imágenes en la parte delantera de sus artículos, no use imágenes con una proporción inadecuada, como imágenes de retrato o imágenes panorámicas, por ejemplo.
En este blog, por ejemplo, yo no modificó el tamaño de mis imágenes en el frenteSólo... adaptó mis visuales. Para hacer esto, yo cambiar el tamaño de todas mis imágenes a la primera página en 1000*625px (ratio 16:10) pero bien podría haber usado otras dimensiones manteniendo la misma relación, por ejemplo: 800*500px o incluso 1200*750px.
Realizar un redimensionamiento de sus imágenes antes de descargar en WordPress es inevitable:
- si uno quiere conseguir una imagen de peso adecuado para mejorar el desempeño de un sitio
- si desea adaptar el formato de imagen a las dimensiones utilizadas por el tema
- si no quieres que las imágenes mostradas sean arañadas
Para retocar tus imágenes, puedes utilizar software como Photoshop, Affinity Photo, Affinity Designer, Gimp, etc... y te aconsejo que leas esta guía dedicada a la optimización de imágenes para la web.
4. ¿Cómo cambio el tamaño de las imágenes de Divi para personalizar su sitio?
Obviamente, dependiendo de su proyecto, es altamente posible que tenga querer cambiar el tamaño de las imágenes de Divi.
¿Le gustaría que las imágenes delante de sus artículos fueran cuadradas para que coincidan con sus imágenes de Instagram o le gustaría que estuvieran en formato retrato para que coincida con Pinterest???
¡Es factible y fácil! Veremos un método que no requerirá ninguna codificación en particular. Como resultado, incluso los principiantes pueden hacerlo!
Consejos: también hay una alternativa Mostrar imágenes en formato Divi.
4.1 – Instalar y activar la extensión Simple Media Sizes
Tamaños de medios simples es una extensión gratuita disponible en el directorio oficial de WordPress, es decir, directamente de su administración a la pestaña Prórrogas Añadir. Solo instala y activa.
4.2 – Cambiar el tamaño de las imágenes de Divi
Una vez activada la extensión, vaya a la pestaña Ajustes Media para encontrar una agradable sorpresa: todos los tamaños de imagen utilizados por Divi aparecieron.
Todo lo que tienes que hacer es agarrar el nuevo ancho o la altura de la miniatura que quieres editar.
Módulo de código Divi
- si quieres tu imágenes ofrecidas o cuadrados : cambiar la miniatura and-pb-post-main-image y and-pb-post-main-image-fullwidth con dimensiones como 400*400px y 1080*1080px (respectivamente).
- si quieres tu imágenes ofrecidas o formato retrato : Haz lo mismo con una relación 3:4 por ejemplo.
- etc...
Finalmente, haga clic en el botón azul "actualizar".
4.3 – Miniaturas regeneradoras
Ahora está en posesión de un nuevo formato de imagen. Será perfecto para futuras imágenes que descargarás en WordPress, pero mientras tanto, para que tus viejas imágenes (las que ya están presentes en la biblioteca de medios) funcionen, debes regenerar las miniaturas.
Es muy sencillo pero puede ser largo si tu biblioteca está muy ocupada. No olvides salvar tus cambios.
4.4 – Resultado de comprobación
He aquí un ejemplo del módulo Blog cuyas miniaturas han sido modificadas para mostrar imágenes en formato cuadrado.
¡No te demores! Descubre el tema Divi aquí. !
5. Tabla sumaria del tamaño de la imagen de Divi
Espero que este artículo le haya ayudado a entender el funcionamiento de las imágenes en WordPress, así como el tamaño de la imagen de Divi.
Si desea embarcarse en tales cambios, le recomiendo encarecidamente duplicar su sitio localmente para hacer sus experimentos con el fin de evitar encontrar problemas (que no podría ayudarle a resolver simplemente dejando un comentario en este artículo).
Tal vez esta tabla sumaria le ayude:
| Clase de imagen Divi | Uso de imágenes | Ratio | Width | Altura |
|---|---|---|---|---|
| and-pb-post-main-image | Monitores de módulos BLOG en versión de diapositivas | 16:10 | 400px | 250px |
| and-pb-post-main-image-fullwidth | Imagen futura (top of articles) | 16:10 | 1080px | 675px |
| and-pb-post-porfolio-image | Imágenes del módulo de galería y del módulo de portafolio en versión Grid | 100:71 | 400px | 284px |
| and-pb-post-porfolio-module-image | – | 510px | 382px | |
| and-pb-post-porfolio-image-single | Mostrar imagen en PROJECTS > imágenes de entradas de módulos de cartera en versión de pantalla completa | – | 1080px | 9999px |
| and-pb-gallery-module-image-portrait | Imágenes del módulo de galería en la versión Retrato | 100:129 | 400px | 516px |
| y-pb-post-main-image-fullwidth-large | Imágenes de módulo de imagen en anchura completa | – | 2880px | 1800px |
Bonjour,
Merci pour cet article et pour l’astuce avec Image Media Sizes. Très pratique!
Malgré tous ces conseils, je bloque sur un point qui me gêne vraiment: dans le module Résumé du Divi Builder, lorsque je positionne le curseur « image width » à 100% dans l’onglet Style/dimensionnement, l’image se cadre parfaitement. J’enregistre, je quitte et lorsque je rouvre le builder, l’ image est gigantesque et dans la prévisualisation de ma page également.
Si, en revanche, je place le curseur à 99%, aucun problème.
Auriez-vous une solution ou un début de piste?
Merci d’avance
Je suppose que c’est un bug, tout simplement. ou une histoire de media queries en fonction de votre résolution d’écran ? Avez-vous essayé depuis un autre navigateur pour voir si ça fait pareil ?
Merci pour votre rapidité.
J’ai testé un autre ordinateur avec un autre navigateur. Même problème! Vous avez certainement raison pour le bug. Je vais essayer de réinstaller WordPress et aller jeter un coup d’œil aux media queries.
Merci.
Bonjour et merci pour ce tuto sur la taille des images.
Je rencontre néanmoins un problème lors de l’utilisation d’images dans un portefeuille Divi.
Une fois les projets défini dans mon portefeuille, lorsque je clique sur un des projets, l’image définie dans le projet s’affiche correctement si mon projet utilise la mise en forme par défaut, mais ne s’affiche pas si j’utilise le générateur Divi dans le projet.
Pensez-vous que cela provienne de la taille de l’image?
Merci
Bonsoir Didier, je ne sais pas trop… avez-vous un exemple à proposer (une page bonne et une qui bug) ?
Excellent tuto merci et bon conseil pour « Simple Image Sizes » mais il me reste un doute : Lorsque vous dites de « redimensionner les images avant le telechargement » dans WP, voulez-vous dire qu’il faudrait importer par ftp toutes les dimensions necessaires ?
Merci pour cet excellent article, et en français en plus ! Tout les autres tutos du web ne traitent que la partie CSS de la taille des galeries mais aucun ne mentionne le process de régénération des miniatures qui est indispensable.
Merci Gabriel
Bonjour Jean Michel, quand je parle de redimensionner, je parle de retailler (réduire) les images pour qu’elles ne fassent plus que 1000px de large par exemple au lieu de 5400px par exemple. Après vous les televersez sur votre site depuis Media > bibliothèque > ajouter. Je ne parlais donc pas de FTP. Est-ce que j’ai répondu à votre question ?
Merci pour votre réponse claire. J’hésitais entre les réglages « Simple Image Sizes » et la reduction des image avant televersement.
Bonjour
merci pour cet article , j’ai suivi vos conseils et j’ai téléchargé l’extension mais je me retrouve toujours dans une impasse….
je souhaite mettre des images en avant pour mes articles. Mais mes images apparaissent trop grandes, j’ai fait les modifications que vous avez suggérées ( modifiez la vignette et-pb-post-main-image ainsi que et-pb-post-main-image-fullwidth avec des dimension comme 400*400px)
mais toujours pareil ma photo est identique….
si vous avez une solution… ce serait top !! merci 🙂
Bonjour,
J’ai suivi votre tutoriel que je trouve très bien fait. Toutefois, cela ne semble pas fonctionner pour les vignettes du portfolio pleine largeur… J’aimerais les avoir carrées mais j’avoue qu’aucune solution trouvée sur internet ne semble marcher.
Est-ce que votre tutoriel permet aussi de personnaliser les vignettes du portfolio pleine-largeur ?
Merci à vous pour votre aide
Bonjour Murielle,
Si j’avais un conseil à vous donner, ce serait d’installer un WordPress en local avec Mamp / Xampp / FlyWheel. Ainsi vous pourriez tester cela sur un site de test. Quand on fait des modifications de ce genre, c’est pas bon de le faire sur un site en production. Toutefois, cela doit être réalisable, je pense… Avez-vous essayé en local ?
Bonsoir Lulu.
C’est difficile de comprendre à distance… Avez-vous un lien, une page qui présenterait ce souci ? Afin que je puisse avoir une idée ?
Super article merci, je suis passé à divi depuis début 2019 et c’est un vrai régale !
Le before after est vraiment un effet sympa, on ne peut s’empêcher de toucher au curseur, même si il est payant, je pense que c’est un bon investissement si on est pas calé en code ^^
Bonne journée !
Bonjour,
Merci pour ce post très intéressant.
J’aurai bien aimé avoir votre avis sur les images de portfolio qui peuvent être agrandies en cliquant dessus. Comment gérer les deux formats pour éviter le redimensionnement par le site.
En vous remerciant.
Valentin
Bonjour
Merci pour votre article très utile.
J’ai une question concernant la gestion du module Image intense de Divi
J’aimerais modifier le Hn de mon texte Overlay Title Part 2
voici comment se présente le html
France
J’aimerais modifier le h2 en h4 par exemple
Merci pour votre aide
Bonjour Gilles. Pour modifier cela, vous devrez certainement le coder dans un thème enfant. De plus, il faudrait voir si cela n’impactera pas en mal votre SEO. À vérifier…
Merci Valentin, je ne saurais pas répondre à ta question. Il faudrait tester mais ça me paraît un peu complexe. Désolée de ne pas pouvoir plus t’aider.
followed this tutorial and now my website doesnt load.. thanks for fucking it up!
Hello « WTF » !!!
I’m sorry for you but, if you read this post until the end, you will see that I have wrote an important message : « If you want to get into this kind of changes, I strongly advise you to duplicate your site locally to do your experiments to avoid problems (which I can not help you solve simply by leaving a comment on this article) »
We never do experiments on a website in production ! Everyone knows it !
Bonjour,
Très intéressant tout ça. Je voudrais savoir s’il vous savez s’il y a une solution pour avoir un type d’image à la une en fonction de la catégorie de l’article ?
Je m’explique, J’ai un site avec des posts classiques et d’autre concernant des couvertures de livres.
J’aimerais en mode grille avoir une image à la taille des couvertures (verticales) mais je sèche….
Une idée ? ce serait formidable
Bonjour Dominique,
Je vois ce que vous voulez dire. Je suppose que cela est possible avec du PHP et une fonction IF du genre, si on est sur cette catégorie, les images de mise en avant doivent avoir telle taille, sinon elles ont telle taille… Mais c’est peut-être un peu trop compliqué pour moi ;-). Un développeur pourrait faire ça facilement… S’il y en a un qui passe par ici…
Merci pour l’astuce ! très utile.
Merci Romain !
Bonjour,
Article très utile mais je n’arrive pas à transformer sur la page produit le format des vignettes qui est carrée (dans la galerie produit) alors que j’ai besoin qu’elles apparaissent en format portrait : pouvez vous me dire si c’est possible et sur quelle classe d’images agir. Merci
Salut Bertrand, il faut que je regarde ça. Je reviendrai ici pour la réponse.
Bonjour
Super tuto, mais j’ai un souci similaire à Bertrand, je ne parviens pas à modifier le format des images au format grille en blog mais spécifiquement pour la page Boutique (sous Divi / Theme builder). Y a-t-il une solution?
Salut LC,
Il faudrait que je trouve le temps de tester ça. Car je ne suis pas sûre d’avoir rencontré ce souci. Par exemple, si tu regardes les captures d’écran de ce tuto, tu verras que les images sont au bon format (portrait) et je n’ai pas eu à modifier cela…
Tu as toujours le souci ?
Bonjour, merci pour votre tuto.
J’ai suivi ce que vous indiquiez, j’ai pour ma part mis une taille d’image de 200×200 pour le et-pb-post-main-image-fullwidth, afin d’avoir une image carré et surtout plus petite pour un article en pleine page. J’ai essayé avec une image de 200×200 mais malheureusement, rien n’y fait, les changements ne sont pas pris en compte 🙁
Auriez-vous une idée ? Merci infiniment
Bonsoir Vulcain : as-tu regénérer les thumbnails ?
bonjour,
je ne l’avais pas fait, mais en utilisant de nouvelles images normalement ça ne pose pas de problème. Je viens de le faire et non malheureusement ça ne change rien 🙁
J’aimerais juste que les images pour le module BLOG en plein écran soient plus petites (j’ai essayé 400×400).
En fait la « boîte » qui contient l’image fait appel à une version de ton image par exemple 200×200. Or, la boîte fait 1000px par exemple et élargi ton image en la pixelisant afin qu’elle fasse 1000px de large. Donc dans ton cas, c’est la boîte qu’il faut réduire et non l’image… tu comprends ? Je suppose qu’il faut modifier le fichier qui contient cette « boîte » et le placer dans un thème enfant…
Bonsoir,
Merci pour la réponse, oui je comprends mieux maintenant, malheureusement je ne sais pas faire ça tant pis ! Merci
OMG thank you for posting the link to the Simple Image Sizes plugin. Tried a bunch of other crap that never worked quite right, but your tutorial and that plugin did the trick.
You’re welcome Rez ! It’s a pleasure 😉
Glad to help you…
Thanks for your comment !
Bonjour, Je découvre divi qui est une révolution ! merci pour votre travail, moi je rencontre un soucis qui n’est pas évoqué dans l’article,
la déformation des photos, j’ai mis une image 1280X720 ou même en 1080, nickel sur PC en pleine ecran mais quand je réduis la fenêtre ou pire quand je visionne sur mobile
l’image est redimensionné en 1:1 et elle se déforme !
Ai je raté quelque chose ?
Bonsoir Eddy.
Je n’ai jamais noté ce type de bug, c’est bizarre. As-tu contacté le support d’ElegantThèmes ? Ils peuvent peut-être t’aider ? Car là, comme ça, je ne vois pas ce qu’il pourrait clocher…
Thank you 🙂
Bonjour,
Malgré toutes les explications très claires, les images « à la une » sur mon blog continuent d’être floues, et ça me chagrine fortement…
Voici ce que j’ai essayé de faire : ma photo est bien au ratio 16:10, avec en dimensions 1000 × 625 pixels. Je la téléverse dans WP, et là j’ai Imagify qui essaye de la compresser, mais je restaure l’original, et également WP Optimize qui essaye d’agir, mais je pense avoir réussi à l’empêcher de la compresser. Ma photo fait 738 KB.
Enfin, dans Simple Media Sizes, j’ai cela :
Taille et-pb-post-main-image 800×500 rognage : oui
Taille et-pb-post-main-image-fullwidth 800×500 rognage : oui
Taille et-pb-post-main-image-fullwidth-large 400×250 rognage : oui
Du coup je suis vraiment perdue sur l’origine du problème…
Salut Mathilde,
Je pense que tu dois modifier la taille de l’image qui affiche l’image à la une. Tu dois mentionner la vraie taille au niveau de la bonne image. Et tu dois régénérer les miniatures. Si tu importes une image de 1000px de large mais qu’elle est affichée à 800px de large, elle sera alors pixelisee.
J’espère que ces précisions t’auront aidées.
Bonjour,
Auriez-vous un autre plugin a nous conseiller car « Cette extension n’a pas été testée avec plus de trois mises à jour majeures de WordPress. Elle peut ne plus être maintenue ou supportée et peut avoir des problèmes de compatibilité lorsqu’elle est utilisée avec des versions de WordPress plus récentes. » ?
Merci beaucoup et bonne soirée,
Ah mince…
Non, j’ai rien d’autre sous la main…
En tout cas elle fonctionne puisque je l’utilise…
Muchas gracias por tu aportación!
Para cambiar la proporción y tamaño de las miniaturas se puede añadir en el archivo functions.php del chiltheme este código:
// Begin custom image size for Gallery Module
add_filter( ‘et_pb_gallery_image_height’, ‘image_size_h’ );
add_filter( ‘et_pb_gallery_image_width’, ‘image_size_w’ );
function image_size_h($height) {return ‘400’;}
function image_size_w($width) { return ‘400’;}
add_image_size( ‘custom-image-size’, 400, 400 );
// End custom image size for Gallery Module
Salut à tous
Muchas gracias Emma por tu ayuda 😉
Merci pour cet article très instructif.
Je ne sais pas si les choses ont changé depuis 2 ans mais je ne vois pas comment customiser les formats d’image Divi dans Réglages > Médias. Je ne vois que les 3 formats WordPress…
Salut Antoine, comme expliqué dans le tutoriel tu as besoin d’un plugin.
Thanks for this!
Hola, gracias por el articulo aunque el complemento que indicas no se actualiza desde hace mucho y no es compatible con nuevas versiones.
Bonjour,
Avez-vous un autre plugins plus récent ? Car lorsque on va sur le lien, voici ce qui est indiqué :
Cette extension n’a pas été testée avec plus de trois mises à jour majeures de WordPress. Elle peut ne plus être maintenue ou supportée et peut avoir des problèmes de compatibilité lorsqu’elle est utilisée avec des versions de WordPress plus récentes.
Donc j’aimerais bien utiliser autre chose.
Merci par avance et merci aussi pour vos supers tutos !
Amicalement
Christelle
Salut Christelle, le plugin fonctionne toujours mais c’est vrai que ça inquiète un peu… Pour l’instant je n’ai pas trouvé d’équivalent.
Gracias Cecilia, de hecho, el complemento ya no está actualizado. Todavía funciona con normalidad (lo creo). Hasta ahora no he encontrado otras soluciones.
Bonjour,
J’ai beau suivre tous les conseils, je me retrouve avec une qualité désastreuse une fois importée sur Divi.
La première image est un peu pixelisée, et la seconde est une véritable horreur.
Je n’arrive pas à régler ce problème…
(Je précise que je suis sortie de formation il y a 3 mois et qu’il s’agit de mon premier vrai site internet ^^)
Salut Lucie, quelle taille d’images importes-tu sur Divi (largeur minimale) ?
Bonjour,
J’ai eu beau essayer, je n’ai pas réussi à recadrer comme il faut les images. Dans le cadre du module BLOG, les photos s’affichent toujours super grand (et qui s’adapte) et non à une taille raisonnable.
Typiquement :
J’écris des articles qui présentent des produits. J’utilise, pour le coup, une image plutôt en belle résolution dans l’article.
Sur une page, j’aimerais afficher dans une colonne d’une rangée les 3 derniers articles (listés les uns par dessus les autres) mettant en vedette ces produits. Je me dis qu’en utilisant le blog en mode grille ça pourrait fonctionner. Mais non. Ca met de magnifiques images, très très larges. Alors que je voudrais une toute petite vignette. Idem pour le mode Plein Ecran.
Sans compter un cropping aléatoire (des fois oui, des fois non, mais ne tient pas compte du réglage du plugin)…
Des idées ?
Aucune idée, ça devrait marcher. Malheureusement il faut investiguer . Sinon il y a ça : https://astucesdivi.com/images-carrees-galerie-portefeuille/
Bonjour,
J’ai suivi l’article et utilisée l’extension pendant un moment. Aujourd’hui en créant mon premier article de blog sur WordPress impossible d’afficher les images dans l’article. J’ai désactivé puis supprimé l’extension (qui en effet n’a pas été mise à jour depuis très longtemps). Et malgré la suppression du plugin mes images sont toujours buguées 😭
Une idée de comment « réinitialiser » la génération des tailles d’images ? Pour supprimer tout effet du plugin en question.
Merci d’avance
Faustine, le plugin est plus maintenu, en effet, mais il fait le job. Du coup il faudrait voir si le problème ne viendrait pas d’ailleurs ? Sinon, le plugin Regenerate Thumbnail permet de recréer les miniatures
Voici ma solution pure CSS pour modifier le module Blog Grid de Divi sans faire de PHP :
/**
* 16/9 BLOG THUMBNAILS
*/
.et_pb_blog_grid .et_pb_image_container {
aspect-ratio: 16 / 9; /* Remplacez par le ratio de votre choix */
position: relative;
}
.et_pb_blog_grid .et_pb_post .entry-featured-image-url {
margin-bottom: 0!important;
position: unset!important;
}
.et_pb_blog_grid img{
object-fit: cover;
width: 100%!important;
height: 100%!important;
position: absolute;
}
Super 👍 merci pour le partage
Une fois encore un article complet et très instructif sur Astucesdivi.
Lu lors de sa mise à jour en octobre 2020, je l’avais enregistré en marque-page me disant que ça me servirait peut-être un jour.
1 an et demi après, c’est chose faite, merci Lycia !
Mon intention était d’afficher les miniatures produits de WooCommerce sans recadrage.
J’ai donc modifié grâce à l’extension les formats WooComerce thumbnail, gallery thumbnail etc. (4 en tout)
Bien que ça n’ait pas fonctionné, j’ai trouvé la solution.
Il suffit d’aller dans Apparence/personnaliser, là dans l’ongle WooCommerce, Divi propose un ratio par défaut de 1/1 pour les miniatures (images recadrées). On peut choisir un ratio personnalisé, ou choisir de ne pas recadrer.
Avec cette dernière option, le ratio d’origine est conservé.
😉
Merci du retour Olivier
bonjour
Merci pour ces précieuses informations.
Cependant et malgré le respect des ratio mes images vignettes sur ma page portfolio, sont malheureusement dégradées… très basse qualité.
Savez-vous pourquoi ?
merci d’avance
Bonjour Lycia,
Merci pour ce tuto très bien fait : )
Par contre j’ai un gros souci avec le site de ma compagne http://evangelisti.fr (Illustratrice et Artiste Peintre).
C’est un site qui a été créé il y a pas mal de temps avec une ancienne version de DIVI (3 quelque-chose, je ne sais plus trop : sans visual builder).
Elle n’y a pas touché durant un bon moment, et a décidé récemment de créer une nouvelle page :
elle a eu la surprise de découvrir la nouvelle interface de DIVI avec le visual builder alors qu’elle n’a fait aucune mise à jour ni moi non plus (j’ai une licence Divi et j’utilise la nouvelle version sur un autre site, géré sur un autre poste…) !
Mais bon, vu que c’est mieux, on ne s’est pas trop pris la tête : )
Elle a donc commencé à créer une nouvelle page, et là un gros problème :
toutes les images nouvellement importées dans la page sont floues et on l’air en basse def !
Après avoir cherché du côté des imports dans la médiathèque qui ont l’air normaux (taille, résolution, RVB etc), j’ai tenté l’expérience de réimporter une photo déjà présente sur le site et dans sa médiathèque depuis des années…
et boum : floue aussi !
Donc, rien à voir avec les images elles-mêmes.
Et si je fais un clic droit sur les images en questions pour les ouvrir dans un nouvel onglet, surprise :
elles s’affichent net, mais en tout petit, rien à voir avec la taille de l’image sélectionnée dans la médiathèque !
Donc il semble qu’il y ait un problème avec DIVI qui importe automatiquement une version plus petite des images demandées…
Une idée ?
Merci d’avance !
Hum, c’est bizarre. Il n’y aurait pas un troisième plugin dans l’équation ? Genre plugin de compression d’image ?
Avez-vous essayé de les réimporter ?
Non, aucun plugin, ni ancien ni encore moins installé récemment…
Après investigation, je pencherais pour un problème d’incompatibilité, voici le déroulé de mes pérégrinations :
Après avoir fait une sauvegarde, j’ai mis à jour toutes les extensions installées (je précise tout de suite que je les ai par la suite toutes désactivées sans changement), mais certaines ne voulaient pas car la version de PHP de mon hébergement était obsolète (PHP 5.xx !).
Je les ai donc contacté vour savoir comment mettre à jour la version, et ils m’indiquent qu’il n’est plus possible d’aller au-delà de la version 7.3 sans changer de type d’hébergement et me proposent une nouvelle gamme d’hébergements qui démarrent pour la version « light » à 72€ par an, contre 28€ actuellement (nom de domaine inclus) !
Je trouve ça incroyable, mais j’ai tout de même fait la mise à jour en PHP 7.3 (maxi donc), et là impossible d’ouvrir les pages via l’interface WP (Pages, toutes les pages etc) : ça m’ouvrais la version WP de base avec le bouton « ouvrir avec DIVI » qui ne marchait plus…
En FTP, j’ai fait la mise à jour de DIVI en 4.24.2, ce qui semble avoir résolu ce problème spécifique (à confirmer, j’ai changé de poste entre-temps) mais sans rien changer aux images pourries…
Voici la page qui pose problème (pas encore accessible via un menu) pour voir de quoi je parle (elle n’est pas finalisée du tout !), à comparer avec le rest du site :
http://evangelisti.fr/edition-livres-cartonnes-2/
Sinon, une autre possibilité serait le mix-content :
je ne comprend pas d’où ça viendrait car le site n’a jamais été passé en https, même si je prévois de le faire dès que possible : )
Bref, si tu as une idée de reste preneur !
Merci
Wahou Thierry, en effet c’est une sacrée aventure. Je ne sais pas trop quoi dire, si ce n’est que j’ai l’impression qui faudrait remettre un peu tout de niveau : PHP, WordPress, HTTPS, etc.