Skip to content

Instantly share code, notes, and snippets.

@Pavracer
Last active June 14, 2019 05:52
Show Gist options
  • Save Pavracer/b8ecda4967f9d8c63c01f59feedd9ffb to your computer and use it in GitHub Desktop.
Save Pavracer/b8ecda4967f9d8c63c01f59feedd9ffb to your computer and use it in GitHub Desktop.
How to change thumbnail size in Divi
Description
Example
To change thumbnail size you will need to add this code to the functions.php
add_filter( 'et_pb_blog_image_width', 'custom_image_width' );
function custom_image_width($width) {
return '600';
}
add_filter( 'et_pb_blog_image_height', 'custom_image_height' );
function custom_image_height($height) {
return '400';
}
add_image_size( 'custom-image-size', 600, 400, array( 'center', 'center' ) );
Last line is needed to register custom size, otherwise image with the closest registered size will be loaded.
If you want change size in another module or template, for example on category page, you just need to change name of the filter: et_pb_blog_image_height To et_pb_index_blog_image_height
et_pb_blog_image_width To et_pb_index_blog_image_width
Note
After you changed size you will need to regenerate thumbnails, here is the plugin for this
https://wordpress.org/plugins/regenerate-thumbnails/
Filters
Filters can be found in template files, in single.php, index.php, main-modules.php
Single post + single page + archive pages (category, tags, search results etc):
et_pb_index_blog_image_width
et_pb_index_blog_image_height
Single project:
et_pb_portfolio_single_image_width
et_pb_portfolio_single_image_height
Blog module
et_pb_blog_image_width
et_pb_blog_image_height
Portfolio modules
et_pb_portfolio_image_width
et_pb_portfolio_image_height
Gallery module
et_pb_gallery_image_width
et_pb_gallery_image_height
Post Slider
In this module we are using function without parameters the_post_thumbnail()
To set particular size for this module you can add this code
set_post_thumbnail_size(200,200);
Post Title
For top and bottom image location you can change size in Settings > Media > Large Size.
For background location we are using full size.
Rare case
Divi generate several thumbnails for each image on server in \wp-content\uploads folder when you upload a new image. In case if user want to stop it you can add this code to the functions.php
add_action('et_theme_image_sizes', function() {
return $et_theme_image_sizes = array(
'9999x9999' => 'custom-size',
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment