Changing Portfolio and Blog Module Thumbnail Sizes

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

I recently worked on a site that had hundreds of blog posts with images that were square. After updating to Divi and creating a homepage with a blog grid layout, all of these images were cropped to Divi’s 400 x 284 rectangular thumbnail size. In this particular case, the images had text at the top and bottom that were cut off from the new image size. Luckily I found a fairly simple solution for changing the image size that the blog module loads. I also found a WordPress function that will add a thumbnail size with the correct aspect ratio when new images are uploaded. If the images you want to change are already uploaded to your site, you’ll need to regenerate the thumbnails AFTER applying this tweak using this plugin. The following solution works for both the blog module and the portfolio module.

PHP

The first thing you’ll want to do is create a file in your child theme folder and name it functions.php. If you already have a child theme installed properly, this file should already exist. Here is a tutorial on creating a child theme.

Your file location should be this /wp-content/themes/Divi-child/functions.php

Now just copy and paste the following code into this file to change the blog module image sizes:

In the code snippet above, the first section is simply importing your child theme style.css file. You should already have this or something similar in your functions.php file. The next section of the snippet changes the blog module image size and adds a this thumbnail size when new images are uploaded.

You’ll want to change the 400 value to whatever image size you need. The following line from above is what adds a new thumbnail size:

You can find more information about this function in the WordPress docs. The function above resizes the uploaded image proportionally, without distorting. You can also hard crop the image by adding a true parameter to the function:

This would hard crop the image from the center position vertically and horizontally. You can change the crop position by adding position values to the function, starting with the horizontal position followed by the vertical:

And finally, if you want to change the portfolio module, you would use this snippet instead:

Keep in mind if you want to change the image sizes for both the blog and portfolio module, you only need to include the add_image_size function once. That is if the images sizes will be the same for both modules. If they will be different, you can include the function twice with different values for each image size. Just make sure the thumbnail name is different for each function:

 

    6 Comments

  1. HUGE help to me, thank you very much! I tried many CSS fixes and none worked right. This is exactly what I needed, I had the same issue as you with the tons of posts with square images. Thank you so much!

    Michelle

    May 27, 2017

  2. I tried this tweak, but my Site turns completely white after saving and I have to restore the original functions.php by FTP. Any idea why this is?

    Mel

    August 17, 2017

    • Hi Mel. Is is likely that you have a php error which could be caused by just about anything: missing bracket, semicolon, parenthesis. The functions.php file needs to open with

      and end with

      If you turn WP_DEBUG on, it should give you an error instead of a blank screen that should help you pinpoint the problem.

      Brad (admin)

      August 17, 2017

  3. Fantastic! Exactly what I wanted – thanks for posting 🙂

    Rob

    August 19, 2017

  4. thanks so much for this tutorial, it’s exactly what i needed!! May I also ask, how do I remove a blo post excerpt from the blog post thumbnail? I just want to see the picture thumbnail and blog title, nothing else. And if I can also remove the border that would be just perfect 🙂 thanks so much in advance!

    Nika

    September 1, 2017

  5. Great tutorial. Thank you so much.

    The code works for the standard portfolio.

    Please, could you post the code for full-width portfolio?

    Many thanks

    Adam

    September 4, 2017

Post a Reply

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