Divi Tips 93

Get square images for Blog, Gallery and Portfolio modules

Updated on 19/05/20

1079 words

4 minutes of reading
35 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

You like square images ? Me too! And the square images in DiviIt's not always easy!

Therefore, I propose a simple tutorial to display Square images in Divi Gallery and Portfolio modules.

No need to know how to code... A few CSS or PHP lines will suffice and you can simply copy and paste them from this article.

Anyway, no need to rip out the hair...

1 – Square images Divi... not so easy!

I don't know why, it's still a mystery, but ElegantThemes hasn't planned anything to make it easier for us to do the job about square images

It's a format that I really appreciate and I guess I'm not the only one... However, no option exists for easily obtain square images when configuring Gallery and Portfolio modules...

So before you start, that goes without saying, your library will already have to contain images in square format, i.e. with a ratio 1:1.

Divi Code Module

  • 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 photo 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 some beginners.

So here's a very simple way of change the display of the images of the modules Gallery and Portfolio Without putting your hands in the code...

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 - Square images for the gallery module

Insert it gallery module within your page using the Visual Builder...

1 Gallery Module
Insert the Gallery module within your page

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

2 Gallery Fashion Landscape
Orientation of the thumbnail: 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 trimmed (cropped) and still display in landscape orientation or portrait... Rrrrr!

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

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

4 Gallery Module Code
Add a Code module

Within your layout, just below the gallery moduleinsert a Code module and enter the following few CSS lines:

<style>
.et_pb_gallery_item img {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
}
.et_pb_gallery_image {
    padding-top: 100%;
}
</style>

That's it, that's it! Here's the result:

5 Gallery Result
Display images of the Divi gallery in square format

3 – Square images for the Portfolio module

The Portfolio module is useful if you use the Divi 'Projects'. Projects behave in the same way as blog articles. These are dynamic publications. The Portfolio module (or Portfolio) is a close cousin of Blog module Divi: it displays your latest "Projects" publications.

To obtain square images with 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 be in possession of projects already published and these must have a image highlighted in square format 1:1.

Within your layout, add a Portfolio module:

1 Portfolio Module
Insert Portfolio Module

Since "Content" tab, you can filter projects to display. Since then, "Style" tab, don't forget to select Grid model.

2 Model Portfolio Grid
Select the "Grid" display template

Since Style tab, you can also customize the appearance of the module and projects... You can add a shadow, border, change the size and font of the text, etc.

3 Portfolio
Appearance of Portfolio Module in Grid Format

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

4 Portfolio Code Module
Add a Code module

To correct this, add a Code module just below the Portfolio module and enter the following code:

<style>
 .et_portfolio_image {
 padding-top: 100%;
 }
 .et_portfolio_image img {
 position: absolute;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 object-fit: cover;
 }
</style>

As with the Gallery module, adding these few CSS lines allows you to quickly and easily get a display projects with square images.

Here's the result:

5 Result Portfolio

Don't delay! Discover the theme Divi here !

4 - Square images for Blog module

For get square images in the thumbnails of the Blog module, some CSS lines will not be sufficient.

You will need to add a few lines of PHP to the file functions.php of your theme child.

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

Square images Blog module
Square images module Blog
// 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 above code, the thumbnails of the blog module will display in square format.

The value "300" is in pixel. You can change this value if necessary.

5 - Other way to get square images in Divi

This way of obtaining square images for galleries, blogs and portfolios Divi is very easy, you have seen.

However, if you wish to obtain very specific image sizes, you should rather follow this tutorial for change the sizes imposed by Divi.

Extension Simple Image Size is precisely easy to use as explained hereHowever, note that its developer has not updated it in some time (this does not mean that it is not effective).

To go further with the images of Divi, I suggest an interesting playlist:

Gallery Carees Pin
Image Carrees Pin

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256

Proudly translated by wpLingua, the translation extension for WordPress That I develop! SEO-Friendly / Automatic / Editable

35 Comments

  1. SAN CARLOS
  2. Lycia Diaz
  3. Denis Gransart
  4. Lycia Diaz
  5. DELOUYE SANDRINE
  6. Lycia Diaz
  7. Minh
  8. Lycia Diaz
  9. minh
  10. Lycia Diaz
  11. Minh Hoangxuan
  12. Lycia Diaz
  13. Minh Hoangxuan
  14. Lycia Diaz
  15. Jerome
  16. Jerome
  17. Jerome
  18. Lycia Diaz
  19. Raphael
  20. Lycia Diaz
  21. Audrey
  22. Lycia Diaz
  23. Bernard
  24. Lycia Diaz
  25. Elodie
  26. Lucie Saladin
  27. Lucie Saladin
  28. Lycia Diaz
  29. Lycia Diaz
  30. Anais
  31. Lycia Diaz
  32. Aline
  33. Lycia Diaz
  34. Marie
  35. Lycia Diaz

Submit a comment

Your email address will not be published. Required fields are indicated with *

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.