Do you like square images? So do I! And square images in Divi are not always easy!
That's why I'm providing a simple tutorial for displaying square images in Divi's Gallery and Portfolio modules.
No need to know how to code... A few lines of CSS or PHP will suffice and you can simply copy and paste them from this article.
In short, there is no need to pull out your hair...
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - Divi square images... not so easy!
I don't know why, it remains a mystery, but ElegantThemes has not provided anything to make it easier for us to deal with square images...
It's a format I really like and I guess I'm not the only one... However, there is no option to easily get square images when configuring the Gallery and Portfolio modules...
So before you start, it goes without saying that your library should already contain images in square format, i.e. with a 1:1 ratio.
For example:
- Images 1000px * 1000px
- Images 800px * 800px
- Images 500px * 500px
- Etc.
The ratio of images is very important in the web and I invite you to read this image guide for Divi This tutorial will allow you to rewrite the image sizes used in Divi in a global way.
However, this requires some knowledge of WordPress and Divi and may be a turn-off for some beginners.
So, here is a very simple way to change the display of images in the Gallery and Portfolio modules without getting your hands dirty with the code...
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
2 - Square images for the Gallery module
Insert the Gallery module within your page using the Visual Builder...
You will be able to select all the images to be displayed from the "Content" tab. Then, from the "Style" tab, make sure you choose the "Grid" template.
The problem is that the Gallery module only offers two possible orientations: Landscape or Portrait...
Unfortunately, depending on the size of your square images, they will be cropped and will still be displayed in landscape or portrait orientation... Rrrrr!
As you can see on the above screenshot, the square images are displayed in landscape format... To correct this, here is what you need to do:
In your layout, just below the Gallery module, insert a Code module and enter the following few lines of CSS:
It's as simple as that! Here is the result:
3 - Square images for the Portfolio module
The Portfolio module is useful if you are using Divi's "Projects". Projects behave in the same way as blog posts. They are dynamic publications. The Portfolio module (or Portfolio) is a close cousin of the Blog module of Divi: it displays your latest "Projects" publications.
To obtain square images with the Portfolio module, we will proceed in the same way as for the Gallery module, it is a variation of the code...
First of all, your site must have projects already published and these must have a featured image in a square 1:1 format.
Within your layout, add a "Portfolio" module:
From the "Content" tab, you can filter the projects to be displayed. From the "Style" tab, don't forget to select the "Grid" template.
From the Style tab, you can also customise the appearance of the module and projects... You can add a shadow, a border, change the size and font of the text, etc.
On the screenshot above, you can see that my projects display thumbnails in landscape format... However, the images used are in square format!
To correct this, add a Code module just below the Portfolio module and enter the following code:
As with the Gallery module, adding these few lines of CSS allows you to quickly and easily display projects with square images.
Here is the result:
Don't delay! Discover the Divi theme here !
4 - Square images for the Blog module
To get square images in the thumbnails of the Blog module, a few lines of CSS will not be enough.
You will need to add a few lines of PHP to the functions.php file of your child theme.
If you do not have a child theme, you can use the Code Snippets extension which will do the same job. It's even simpler!
// Begin square featured image in Divi Blog Module
function ld_blog_square_image_width($width) {
return 300;
}
function ld_blog_square_image_height($height) {
return 300;
}
add_filter( 'et_pb_blog_image_width', 'ld_blog_square_image_width' );
add_filter( 'et_pb_blog_image_height', 'ld_blog_square_image_height' );
// End stop square featured image in Divi Blog ModuleBy inserting the above code, the thumbnails in the Blog module will be displayed in a square format.
The value "300" is in pixels. You can change this value if necessary.
5 - Another way to get square images in Divi
This way of getting square images for Divi galleries, blogs and portfolios is very easy, as you've seen.
However, if you want to get specific image sizes, you should follow this tutorial instead to change the sizes imposed by Divi.
The extension Simple Image Size is easy to use as explained hereHowever, note that the developer has not updated it for some time (this does not mean that it is not effective).
To go further with Divi's images, I suggest an interesting reading list:
- 6 Unique Border Designs for your Divi Gallery Module Images
- The Difference Between Covered Images and Featured Images in WordPress
- The Ultimate Guide to Using Images within Divi
- How to Regenerate Thumbnails and Crop Images in WordPress
Super intéressant, merci !
Merci Carlos !
C’est vrai qu’il est important que les images ne soient pas croppées car dans certains cas ça peut être un facteur de ralentissement de la performance du site, d’une part.
D’autre part, j’ai pris l’habitude via Lightroom et photoshop de ne produire que des photos carrées et compressées, ceci principalement pour une question d’homogénéité de présentation de mes produits.
Par ailleurs pour le « Responsive » au niveau portable, ça peut éviter de se retrouver avec des commentaires de Google que les photos ne sont pas adaptées car trop larges.
Enfin, si on veut produire également sur Instagram, le format carré est plus que recommandé.
Oui, moi aussi j’aime bien utiliser le format carré, ça passe partout !
merci beaucoup ! j’ai enfin trouvé des réponses à mes questions et des solutions à mes problèmes !!
Super !
Hello,
Merci pour ton article très intéressant.
Comment faire si je souhaite faire des images dans un autre format que carré ?
Par exemple 200 x 300
Merci
Salut Minh,
Je pense que c’est ce tuto dont tu as besoin : https://astucesdivi.com/taille-images-de-divi/
C’est gentil mais j’ai fait tout ce que dit l’article et cela n’a pas fonctionné.
Les miniatures du module gallery sur ma home sont toujours rognées en largeur.
Si tu as une idée de ce qui a posé pb je suis preneur de ton aide 🙂
Salut Minh, j’ai une petite idée : quelle sont les tailles des images que tu uploades ? Charge une image de 1000px ou 1200px minimum et regarde si elle est rognée aussi.
Les images que je charge font 1920 1080.
Je viens de tester avec une image de 1290 px x 861 et ce la ne change rien, l’image est croppée.
(Pour info ce sont les images en dessous du player youtube sur cette page : http://www.pokeslide.com )
Je vais regarder demain depuis mon ordinateur car ton lien ne fonctionne pas sur mon mobile. Bizarre
Sorry.
Pas étonnant, j ai fait une typo et oublié le c à com…
le site est http://www.pokeslide.com
Salut Minh,
Très joli site…
Si tu inspectes le code source de ta page, tu verras que ce sont des miniatures recadrées par Divi qui sont utilisées (400px*284px). Donc, soit tu suis à la lettre (en l’adaptant) ce tuto : https://astucesdivi.com/taille-images-de-divi/ pour changer les tailles utilisées par le module Portefeuille, soit tu utilises uniquement des images de 800px*568px (ou 1200px*852px) que tu recadres à ta sauce dans un logiciel photo. Je ne vois que ça…
Bonjour Lycia,
Chouette tuto, ça fonctionne impeccable merci !
Par contre, petite question concernant les vignettes. Elles ne sont pas cropées comme je l’aimerais. Comment y remédier stp ?
Désolé, j’avais pas vu que Minh avait le même soucis que moi et votre réponse.
En effet en inspectant je vois que mes miniatures sont également en 400*284.
Je comprends pas trop votre commentaire : « soit tu utilises uniquement des images de 800px*568px (ou 1200px*852px) que tu recadres à ta sauce dans un logiciel photo. »
Je recadre comment, au ratio 1:1 ? Merci
Décidément je pose les questions trop vite puisque je crois avoir trouvé dans votre lien. Ratio 100:71.
Super Jerome, alors tu vas pouvoir faire 😉
Merci, je cherche ça depuis longtemps et ça marche vraiment super!
Parfait ! Raphaël 😉
Bonjour, merci pour le tuto.
Moi j’ai le même soucis pour la partie blog. Je veux que mes images principales s’affichent en carré sauf qu’il ne me le fait pas tout le temps en tout cas sur la page d’accueil du site.
Le code que tu donne c’est pour le module code ou pour le fichier function.php du thème enfant ?
Salut Audrey, tout est expliqué dans le tuto. Selon le code à ajouter tu utilises le module code ou le thème enfant. Pour le chapitre 4 de cet article, celui qui devrait t’intéresser, il s’agit du fichier functions.php du thème enfant.
Super merci pour cette astuce!
Et… y a-t-il possibilité de manager deux galeries avec des formats différents sur la même page?
Hé oui j’ai une galerie pour des images au format carré et en dessous une autre pour des formats rectangulaires, et du coup tout passe en carré 🙁 …
Salut Bernard ! En fait, il faudrait que tu mettes une Classe CSS sur ta galerie. Et dans le code CSS, tu n’appelles que les galeries qui sont dotées de cette Classe
Bonjour, merci pour ce tuto. Petite question néanmoins, mes images s’affichent correctement dans le portfolio en format carré, mais la miniature est très pixélisée (or la photo chargée a été optimisée pour le web). Avez-vous une astuce pour cela ?
Merci et bonne journée
Super astuce, j’adore et la décline souvent !
Je me trouve bloquée par contre pour la dupliquer sur un format portfolio pleine largeur… Possible ?
Ca y est, j’ai finalement trouvé un bout de code le permettant en passant par la personnalisation du CSS (et non plus par le module code comme proposé ici). Merci pour tous les tutos vraiment bien construits. Une aide précieuse !!
Merci Lucie pour ton retour
Coucou Elodie, je pense qu’il faudrait redéfinir la taille des images https://astucesdivi.com/taille-images-de-divi/. (désolée du retard, ton commentaire était dans mes spams)
Bonjour,
Merci pour cet article, très utile !
Je souhaite modifier les marges internes entre chaques images, est-ce possible ?
Merci par avance
Anais, as-tu essayé avec les options du module ou bien en CSS ?
Bonjour Lycia !
Merci tellement ! Apres avoir galeré pendant 3h, on m a envoyé ce lien et c’est parfait ! Je m arrachais les cheveux pour faire des images rondes dans le module blog…
J’ai dû ajouter du css derriere pour separer un peu les items mais franchement merci ! L ajout de php, je n y aurais jamais pensé…
Merci Aline !
Bonjour Lycia,
Merci pour ce tuto, en revanche, si ça fonctionne bien pour la galerie et le portfolio, impossible de faire fonctionner le code pour le blog…
J’ai ajouté le code à la fin du fichier functions.php de mon thème enfant comme indiqué dans le tuto mais rien n’a changé… J’aimerais éviter de rajouter une extension pour faire ça, mais du coup est-ce que tu as une idée des raisons qui pourraient faire que ça ne marche pas ?
Merci !
Salut Marie, il faut que tu adapte ce code selon ton propre site. Regarde si les « class » sont correctes par exemple.