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!
Get Technically Speaking with Megan

Nice idea. To prevent the duplicate loading and the “flicker” glitch, set the img CSS to display:none, and then use the jquery show() method on the image after the src is swapped. CSS will prevent the load on the original image.
Thanks for the tip, John! That’s a good idea.
Dear Megan
I have a similar problem – I need an initial Gallery image that is quite large – at least 572 x 572px.
I am using a single image to pop-up to a gallery.
I am not sure where to place the javascript (in Divi > Theme Options > Integration > add code to the head of your blog (?)
Also – don’t want to sound stupid, but how would the final implementation look, including css and integrating the comments from John Herr (above).
Thanks for any help…
Arlene,
For the JavaScript, I was using a custom child theme and placed it in my theme’s files, then used wp_enqueue_script to add it to the page. I assume it would work if placed in the “add code to head” section, though. 🙂 It’s hard to say how the final product would look without seeing your site.
Also, keep in mind that I created this technique for Divi 2.4 about 2 years ago, so it may not be applicable or there might be a better solution now.
Hope that helps! 🙂
— Megan