How to change the size of Divi image gallery grid thumbnails without a plugin

The Good Stuff

My solution: hack the thumbnail’s source with JavaScript, then use CSS to set it to the appropriate size. See it in action here. The following function uses jQuery, but it would be fairly easy to do the same thing without it if your project isn’t already using it:

function resizeThumbnails ($container) {
  $images = $container.find('img'); // Get all the images inside your $container

  $images.each (function (index, element) {
    $src = jQuery(element).attr('src'); // Get the image's source
    jQuery(element).attr('src', $src.replace('-400x284', '')); // Remove the thumbnail size portion from the source and replace it
  });
}

(Note: This applies to Divi 2.4; there may be a better method for newer versions of the theme.)

The Details

Recently, I was working on a WordPress site for a client who wanted to use Divi as the base theme. I needed to implement image galleries in a few different custom post types for said site. Divi includes an image gallery with grid display in its modules, so I wanted to use it instead of integrating a different gallery to keep site updates as user-friendly as possible.

There was only one problem: for the life of me, I couldn’t find any way to adjust the size of the thumbnails!

I tried overriding Divi’s post_thumbnails.php file…no dice. I thought because the thumbnails were the same resolution as the 'et-pb-portfolio-image' option in the theme image sizes array, Divi would use its value to generate them. After a little (okay, a lot) of digging in Divi’s includes directory, I found where the gallery module was declared. Imagine my surprise when I found out that the sizes for the image gallery grid thumbnails are hard-coded! I thought there would be a hook available to customize something so closely tied to presentation—something designers and developers are very likely to want to change—but there wasn’t.

At this point, I was determined to find a way around this restriction. I tried overriding Divi’s main-modules.php file with one of my own (not the greatest idea, I know), but I couldn’t get the dependencies to work. Since changing the thumbnail size was a necessity, it came down to picking the shiniest of two turds: changing Divi’s actual theme files or finding a way to hack it with JavaScript. Since I didn’t want to lock the client into never updating the site’s copy of Divi, JS was my turd of choice. 😉

Luckily, it turned out to be a fairly easy task. All I needed to do was remove the thumbnail size part of the image’s source to change the thumbnail to the full size version, which I then appropriately sized with CSS. It’s hacky, that’s for sure, but it was the only acceptable solution for my needs at the time. If you find yourself in the same pickle I was in, it might work for you, too. Just be warned that you’ll have a “flash” of the originally sized thumbnails being shown before they’re resized, and if you choose to display the full-resolution image as the thumb like I did, it will obviously increase your page’s loading time.

Know of a better solution to this problem? Tell me about it in the comments!