Custom Image Sizes: Cheat Sheet

[d19dotca]

Yes. Is there a particular issue you’re seeing?

The snippet I’m currently using to disable some image sizes and leave it to Bricks custom image sizes instead is the following:

<?php
add_filter("intermediate_image_sizes", "d19_remove_default_images", 10, 1);
function d19_remove_default_images($sizes)
{
    $targets = [
        "medium",
        "medium_large",
        "large",
        "1536x1536",
        "2048x2048",
        "woocommerce_thumbnail",
        "woocommerce_single",
        "woocommerce_gallery_thumbnail",
    ];
    foreach ($sizes as $size_index => $size) {
        if (in_array($size, $targets)) {
            unset($sizes[$size_index]);
        }
    }
    return $sizes;
}

[simon]

I use this and it works fine:

/* ------- Custom Image Sizes - we don’t use Wordpress default sizes as they are too limiting ------- */
add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘Hero image’, 1920, 9999 );
add_image_size( ‘Container image’, 1366, 9999 );
add_image_size( ‘Extra large image’, 1120, 9999 );
add_image_size( ‘Large image’, 960, 9999 );
add_image_size( ‘Medium image’, 800, 9999 );
add_image_size( ‘Small image’, 640, 9999 );
add_image_size( ‘Extra small image’, 480, 9999 );
add_image_size( ‘XX small image’, 240, 9999 );

/* Make sizes available in Bricks */
function wpb_custom_image_sizes( $size_names ) {
$new_sizes = array(
‘Hero image’ => ‘Hero image’,
‘Container image’ => ‘Container image’,
‘Extra large image’ => ‘Extra large image’,
‘Large image’ => ‘Large image’,
‘Medium image’ => ‘Medium image’,
‘Small image’ => ‘Small image’,
‘Extra small image’ => ‘Extra small image’,
‘XX small image’ => ‘XX small image’,
);
return array_merge( $size_names, $new_sizes );
}
add_filter( ‘image_size_names_choose’, ‘wpb_custom_image_sizes’ );

[ninmorfeo]

@simon

/* ------- Custom Image Sizes - we don’t use Wordpress default sizes as they are too limiting ------- */
add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘Hero image’, 1920, 9999 );
add_image_size( ‘Container image’, 1366, 9999 );
add_image_size( ‘Extra large image’, 1120, 9999 );
add_image_size( ‘Large image’, 960, 9999 );
add_image_size( ‘Medium image’, 800, 9999 );
add_image_size( ‘Small image’, 640, 9999 );
add_image_size( ‘Extra small image’, 480, 9999 );
add_image_size( ‘XX small image’, 240, 9999 );

/* Make sizes available in Bricks */
function wpb_custom_image_sizes( $size_names ) {
$new_sizes = array(
‘Hero image’ => ‘Hero image’,
‘Container image’ => ‘Container image’,
‘Extra large image’ => ‘Extra large image’,
‘Large image’ => ‘Large image’,
‘Medium image’ => ‘Medium image’,
‘Small image’ => ‘Small image’,
‘Extra small image’ => ‘Extra small image’,
‘XX small image’ => ‘XX small image’,
);
return array_merge( $size_names, $new_sizes );
}
add_filter( ‘image_size_names_choose’, ‘wpb_custom_image_sizes’ );

dont work for me at last version

[simon]

Works for me on 1.8.3 and latest wordpress.

[ninmorfeo]

Do you need to enable something in the settings maybe?

[simon]

Hi,

It looks like Wordpress is still generating its default image sizes. Go to Settings > Media in Wordpress admin and set 0 for each dimension for the three image sizes.

[ninmorfeo]

I really don’t think they are the same images that generate wordpress, they are a completely different measure

[simon]

Do you have this to remove all default image sizes?

/* ------- Stop Wordpress creating all default image sizes ------- */
add_filter( ‘intermediate_image_sizes’, ‘remove_default_img_sizes’, 10, 1);

function remove_default_img_sizes( $sizes ) {

$targets = [‘thumbnail’, ‘medium’, ‘medium_large’, ‘large’, ‘1536x1536’, ‘2048x2048’, ‘woocommerce_thumbnail’, ‘woocommerce_single’, ‘woocommerce_gallery_thumbnail’];
foreach($sizes as $size_index=>$size) {
if(in_array($size, $targets)) {
unset($sizes[$size_index]);
}
}
return $sizes;
}

[ninmorfeo]

@simon

/* ------- Stop Wordpress creating all default image sizes ------- */
add_filter( ‘intermediate_image_sizes’, ‘remove_default_img_sizes’, 10, 1);

function remove_default_img_sizes( $sizes ) {

$targets = [‘thumbnail’, ‘medium’, ‘medium_large’, ‘large’, ‘1536x1536’, ‘2048x2048’, ‘woocommerce_thumbnail’, ‘woocommerce_single’, ‘woocommerce_gallery_thumbnail’];
foreach($sizes as $size_index=>$size) {
if(in_array($size, $targets)) {
unset($sizes[$size_index]);
}
}
return $sizes;
}

ok I have revealed the mystery, the code works as long as you don’t use dynamic data. If, for example, instead of choosing an image from the library, you use the featured image by recalling it with dynamic data by using {featured_image} , then the values ​​of the function you wrote are not loaded. try it

[simon]

Works for me …

Bricks doesn’t know the image sizes dynamically apparently so lists everything which is why at the bottom you can see 2x medium large (1536x1536) which two of us raised as a bug at the time. Neither of us was creating this image size or one other that appears below it.

[Bloggs]

Hey @faebe, I’m wondering how do you go about the site backups?

On a site that has a decet amount of images, when you create 25 sizes for every single image, you’ll probably end up with huge backups going to several GB in size which then makes daily backups almost impossible, not to mention migrating the site.

Wouldn’t it be easier to signup with something like Shortpixel’s Adaptive Images plugin, then have a single size for your image, and let the plugin size the images to the elements shown on screen?

You could probably even spend your money on Cloudflare Images instead of on additional storage space.

I’m currently sitting onn the fence with all the image sizes hence why I ended up on this post.

I just had a pleasure of migrating a website that was 9GB in size exactly because the theme that was initially on it was generating 20 sizes for every image.