Get square images for the Blog, Gallery and Portfolio modules

Updated on 19/05/2020 | Published on 27/04/2020 | 18 comments

You like square pictures? So do I! And square pictures in Divi, it's not always easy!

That's why I propose a simple tutorial to display 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.

Anyway, no more pulling out your hair...

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Divi square pictures... not so easy !

I don't know why, it remains a mystery, but ElegantThèmes has nothing to make it easier for us about square images ...

It's a format that 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 on 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 can cool down some beginners.

So here's a very simple way to change the display of images in the Gallery and Portfolio modules without getting your hands on 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 .

1 Gallery Module
Inserting the Gallery module in your page

You will be able to select all the images to be displayed from the "Content" tab. Then, from the " Style " tab, be sure to choose the " Grid " template.

2 Gallery Mode Paysage
Thumbnail orientation: landscape or portrait

The concern is that the Gallery module offers only two possible orientations: Landscape or Portrait?

Unfortunately, depending on the size of your square images, they will be cropped (cropped) and will still be displayed in landscape or portrait orientation... Rrrrr!

3 Gallery Apparence
Appearance of initially square images in the Gallery module in landscape mode

As you can see on the above capture, square images are displayed in landscape format. To correct this, here's what you need to do :

4 Gallery Module Code
Add a Code module

Within your layout (layout), just below the Galerie module, insert a Code module and enter the following few lines of CSS:

There, it's as simple as that! Here's the result:

5 Gallery Resultat
Displaying Divi gallery images in square format

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 from 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 variant of the code .

First of all, your site must have already published projects and these must have a 1:1 square format image.

Within your layout, add a "Portfolio" module:

1 Portefeuille Module
Insert the 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.

2 Portefeuille Modele Grille
Select the "Grid" display model

From the Style tab, you will also be able to customize the appearance of the module and the projects. You will be able to add a shadow, a border, change the size and font of the text, etc.

3 Portefeuille Apparence
Appearance of the Portfolio module in Grid format

On the screenshot above, you can see that my projects display thumbnails in landscape format... However, the images used are in square format!

4 Portefeuille Module Code
Add a Code module

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 CSS lines allows you to quickly and easily display projects with square images.

Here is the result:

5 Portefeuille Resultat

Don't delay any longer! 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'll need to add a few lines of PHP in the functions.php file of your children's theme.

If you don't have a child theme, you can use the Code Snippets extension who will do the same job. It's even simpler!

Images Carrées Module Blog
Square images Blog module
// 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 Module

By inserting the code above, the thumbnails of 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, you've seen it.

However, if you want to get specific image sizes, you should rather follow this tutorial to change the sizes imposed by Divi.

The extension Single Image Size is just that 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 propose you an interesting playlist :

Galerie Carees Pin
Image Carrees Pin
Square Image Divi Pin

1,042 words

4

You should like it too:

Images rognées (recadrées) dans Divi : comment éviter cela ?

Cropped (cropped) images in Divi: how to avoid this?

Why does Divi display cropped images? This is often the case for the thumbnails of the Blog and Portfolio modules... Without forgetting the Divi Gallery... In these 3 modules the images are trimmed, cropped, cropped ! Here's how to fix this...

18 Commentaires

  1. SAN CARLOS

    Super intéressant, merci !

  2. Lycia Diaz

    Merci Carlos !

  3. Denis Gransart

    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é.

  4. Lycia Diaz

    Oui, moi aussi j’aime bien utiliser le format carré, ça passe partout !

  5. DELOUYE SANDRINE

    merci beaucoup ! j’ai enfin trouvé des réponses à mes questions et des solutions à mes problèmes !!

  6. Lycia Diaz

    Super !

  7. Minh

    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

  8. minh

    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 🙂

  9. Lycia Diaz

    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.

  10. Minh Hoangxuan

    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 )

  11. Lycia Diaz

    Je vais regarder demain depuis mon ordinateur car ton lien ne fonctionne pas sur mon mobile. Bizarre

  12. Minh Hoangxuan

    Sorry.
    Pas étonnant, j ai fait une typo et oublié le c à com…
    le site est http://www.pokeslide.com

  13. Lycia Diaz

    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…

  14. Jerome

    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 ?

  15. Jerome

    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

  16. Jerome

    Décidément je pose les questions trop vite puisque je crois avoir trouvé dans votre lien. Ratio 100:71.

  17. Lycia Diaz

    Super Jerome, alors tu vas pouvoir faire 😉

Soumettre un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This