Here's a thorny subject: the size of the images of Divi. In fact, it is not only about Divi, all WordPress themes use specific image sizes and many users may feel frustrated at some point.
When I give Divi training and WordPress, there are many questions that come back each time:
- Why is my image cropped â cut â cropped?
- Why does my portrait image appear in landscape format?
- Why is my image zoomed in?
I know it's pretty annoying. There will then be two solutions to remedy this:
- either you bend to your theme and use the adequate format so that your image is not not cropped inadvertently.
- either you perform some changes so that it is the theme that meets your requirements.
I bet you prefer the second option, don't you? In this article, we will address all these points. Here is the program:
- 1. How does WordPress manage your images?
-
2. How does Divi manage your images?
- Image format #1: and-pb-post-main-image
- Image format n°2 : et-pb-post-main-image-fullwidth
- Image format n°3 : et-pb-portfolio-image
- Image format #4: and-pb-portfolio-module-image
- Image format n°5 : and-pb-portfolio-image-single
- Image format n°6: and-pb-gallery-module-image-portrait
- Image format n°7: and-pb-post-main-image-fullwidth-large
- 3. How to get correct images by keeping the size of the images of Divi?
- 4. How do I change the size of Divi's images to customize its site?
- 5. Summary table of the image size of Divi
1. How does WordPress manage your images?
First, you will have to understand what WordPress does when you download an image in the media library.
For example, you download an image of a dimension of 1280px * 720px in your library => this is the original format of your image.
Now, if you look at your site files, via FTP (Filezilla), at the tree www > wp-content > uploads > year folder > month folder, you will realize that WordPress has multiplied your image in 5, 6, 7 or 8 files or even more! This is what we call the THUMBNAILS or VIGNETTES.
You don't use Divi yet? Here are 10 reasons to opt for this theme !

Yet, if you go into your WordPress administration, at the tab Settings > Media you will see only 3 thumbnail formats : miniature size, medium size and large size.
These three formats are the standard formats WordPress needs (for example, to display thumbnails of your media in the library).
Where did the other thumbnails come from? That's the theme of course! Your theme also needs thumbnails to work. Each theme offers different visuals so each theme will need to different image formats.
Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"
2. How does Divi manage your images?
As we just saw, WordPress needs 3 image formatsbut the Theme DiviAs for him, he needs 7 additional formatsHere they are:
Image format #1: and-pb-post-main-image
This is the format used for the thumbnails of BLOG module in "grid" version as in "diapo" version. This format is set with the dimensions of 400px * 250px â or one ratio of 16:10 (slightly different from 16:9).
This should also interest you: how to get square images for Blog, Gallery and Portfolio modules.
Image format n°2 : et-pb-post-main-image-fullwidth
This is the format used for on images at the front that appear at the top of each of your articles, just below the title. This format is set with the dimensions of 1080px * 675px â or always one ratio of 16:10.
Image format n°3 : et-pb-portfolio-image
This is the format used for the Gallery Module and Portfolio Module in Grid mode (Portfolio which is related to the post-type custom "Project") when on thumbnail page (with all module entries). This format uses the dimensions of 400px * 284px â either a ratio (a rather bastard, sorry for the word) of 100:71.
Image format #4: and-pb-portfolio-module-image
This format uses dimensions 510px * 382px. Beyond your images will be Groved.
Image format n°5 : and-pb-portfolio-image-single
This is the format used for the image at the front that displays at the top of each of your Projects (Portfolio) but also for images of the portfolio module project page in full screen mode.
This format uses dimensions of 1080px * 9999px. Generally none of your images will have this dimension but this means that your image does not will be cropped only if it has a height greater than 9999px.
In other words, these images will be able to maintain their ratio in portrait or landscape. These are the only images of Divi that do not undergo cropping.
Image format n°6: and-pb-gallery-module-image-portrait
This is the format used for the Gallery Module Positioned on the Portrait Mode. This format uses dimensions 400px * 516px â or one ratio of 100:129.
Image format n°7: and-pb-post-main-image-fullwidth-large
This is the format used for the "Image in full width" module. It uses dimensions 2880px * 1800px. Beyond these dimensions, your image will be trimmed.
3. How to get correct images by keeping the size of the images of Divi?
Now that we've gone around the different sizes of images used by the Divi theme, this will help you understand what images to use if you want to keep the sizes offered by Divi...
3.1 Understand the importance of RATIO (or REPORT)
If we look well, the most important to get correct results for the display of your images in WordPress, it is take into account the ratio. Actually, dimensions are of little importance and this is often the most difficult to understand. Examples include:
The ratio 1:1
This ratio 1/1 means that the width is equivalent to the height. So a 1000*1000px image, a 750px*750px image or even a 500px*500px image will always have the same ratio.
The 3:2 ratio
This ratio means that the width is equivalent to 3/3 and the height is equivalent to 2/3. So an image of 900px width will have to have a height of 600px to keep a ratio of 3:2. Same for 1800px*1200px images, they will always have a ratio of 3:2.
The ratio 4:3
These images will have a width of 4 quarters for a height of 3 quarters. For example: 1000px*750px or 1600px*1200px etc...
The 16:9 ratio
This obviously works like other ratios, except that one will certainly need a calculator to make this calculation: [(width of an image)/16*9 = height]. This format is widely used in video : 1920px * 1080px.
The 16:10 ratio
This format is less known, it is close to 16:9 and This is the format used by Divi, especially for the « images on the front page » of the articles and thumbnails of the « blog module in grid mode ».
The ratio or ratio, it is neither more nor months than mathematics and there is a site that will allow you to know the ratio of your images by simply informing the width and height of the latter.
3.2 Resize images before downloading in WordPress
Well, I think this is getting clearer. We know that dimensions are important only because they affect the weight of the images But the ratio is much more important. So if you want to keep the images sizes of Divi, you will have to reframe your images according to the appropriate ratio.
This article will probably help you: find out how to avoid images recadrated in Divi.
Everything has been said above: if you want Divi no longer to frame the images at the front of your articles, do not use images with an inadequate ratio, such as portrait images or panoramic images for example.
On this blog, for example, I did not modified the size of my images at the front, I just... adapted my visuals. To do this, I resize all my images to the front page at 1000*625px (ratio 16:10) but I could very well have used other dimensions while keeping the same ratio, for example: 800*500px or even 1200*750px.
Performing a resizing of his images before downloading in WordPress is inevitable:
- if one wants to get a weight image suitable for improving the performance of a site
- if you wish to adapt the image format to the dimensions used by the theme
- if you do not want the images displayed to be scratched
To retouch your images, you can use software like Photoshop, Affinity Photo, Affinity Designer, Gimp etc... and I advise you to read this guide dedicated to the optimization of images for the web.
4. How do I change the size of Divi's images to customize its site?
Obviously, depending on your project, it is highly possible that you have want to change the size of the images of Divi.
Would you like the images in front of your articles to be square to match your Instagram images or would you like them to be in portrait format to match Pinterest???
It's feasible and easy! We will see a method that will not require any particular coding. As a result, even beginners can do it!
Tips: there is also an alternative for display images in format in Divi.
4.1 â Install and activate the Simple Media Sizes extension
Simple Media Sizes is a free extension available on the official WordPress directory, i.e., directly from your administration to the tab Extensions > Add. Just install and activate.
4.2 â Change the size of the images of Divi
Once the extension is activated, just go to the tab Settings > Media to find a nice surprise: all image sizes used by Divi appeared.
All you have to do is grab the new width or height of the thumbnail you want to edit.
Divi Code Module
- if you want your featured images either squares : change the thumbnail and-pb-post-main-image and and-pb-post-main-image-fullwidth with dimensions such as 400*400px and 1080*1080px (respectively).
- if you want your featured images either portrait format : Do the same with a ratio 3:4 for example.
- etc...
Finally, click the blue button "update".
4.3 â Regenerating miniatures
You are now in possession of a new image format. It will be perfect for future images that you will download in WordPress, but in the meantime, for your old images (those already present in the media library) to work, you must regenerate thumbnails.
It's very simple but it can be long if your library is very busy. Don't forget to save your changes.
4.4 â Check Result
Here is an example of the Blog module whose thumbnails have been modified to display images in square format.
Don't delay! Discover the theme Divi here !
5. Summary table of the image size of Divi
I hope that this article will have helped you understand the functioning of the images in WordPress as well as the image size of Divi.
If you want to embark on such changes, I strongly advise you to duplicate your site locally to do your experiments in order to avoid encountering problems (which I could not help you solve simply by leaving a comment on this article).
Perhaps this summary table will help you:
Image Class Divi | Use of images | Ratio | Width | Height |
---|---|---|---|---|
and-pb-post-main-image | BLOG module monitors in grid & slide version | 16:10 | 400px | 250px |
and-pb-post-main-image-fullwidth | Forward image (top of articles) | 16:10 | 1080px | 675px |
and-pb-post-porfolio-image | Images of Gallery Module and Portfolio Module in Grid Version | 100:71 | 400px | 284px |
and-pb-post-porfolio-module-image | â | 510px | 382px | |
and-pb-post-porfolio-image-single | Display image on PROJECTS & images of portfolio module entries in full screen version | â | 1080px | 9999px |
and-pb-gallery-module-image-portrait | Images of the gallery module in Portrait version | 100:129 | 400px | 516px |
and-pb-post-main-image-fullwidth-large | Image module images in full width | â | 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.