IMPLEMENTED: New image sizes appearing after update to 1.7.2

[simon]

Browser: Any
OS: macOS

Since upgrading I am seeing two extra image sizes in the image size dropdown:
2x medium (1536 x 1536)
2x medium large (2048 x 2048)

In my functions.php I have the following code:

/* ------- 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;
}

This code has worked so far and before today I did not have these two image sizes displayed in the dropdown. These image sizes are not being created so is Bricks suddenly reporting incorrectly?

[d19dotca]

I noticed this as well today on a new site with 1.7.2.

I had disabled the built-in ones and used Bricks’ custom image sizes. Now I see the “2x” ones as well since 1.7.2.

[timmse]

Hi guys,

Please take a look at line 5255 in wp-includes/media.php. The two image sizes are generated by WordPress, not Bricks.

/**

* Adds additional default image sub-sizes.
*
* These sizes are meant to enhance the way WordPress displays images on the front-end on larger,
* high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes
* when the users upload large images.
*
* The sizes can be changed or removed by themes and plugins but that is not recommended.
* The size "names" reflect the image dimensions, so changing the sizes would be quite misleading.
*
* @since 5.3.0
* @access private
*/

function _wp_add_additional_image_sizes() {
  // 2x medium_large size.
  add_image_size( '1536x1536', 1536, 1536 );
  // 2x large size.
  add_image_size( '2048x2048', 2048, 2048 );
}

Within Bricks, the label of the two image sizes is renamed, but this has nothing to do with creating or not creating the image sizes:

My guess is that you both uploaded an image for the first time that is significantly larger and triggers the generation of the @2x image sizes

[simon]

Hi Stefan,

I have uploaded one 1920 width image before upgrading to Bricks 1.7.2 and wordpress did not generate a 1536 version because the code in functions.php prevents this from happening. It is only since 1.7.2 upgrade that these two items have appeared. As this is a new site I don’t have many images and so have checked all the images in the wordpress uploads folder and there are none of 1536 or 2048 width.

[DoylePadilla]

If you want to remove these dimensions from the list, you need to add them to the list of targets you want to remove:
function remove_default_img_sizes( $sizes ) {
$targets = array( ‘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;
}
add_filter( ‘intermediate_image_sizes’, ‘remove_default_img_sizes’ );

[simon]

That’s what I’ve had since day 1 as detailed in my first post.

[timmse]

Using this code (which is, tbh, much simpler) it works without problems:

// disable generated image sizes
function tm_disable_image_sizes( $sizes ) {
	unset( $sizes['thumbnail'] ); // disable thumbnail size
	unset( $sizes['medium'] ); // disable medium size
	unset( $sizes['large'] ); // disable large size
	unset( $sizes['medium_large'] ); // disable medium-large size
	unset( $sizes['1536x1536'] ); // disable 2x medium-large size
	unset( $sizes['2048x2048'] ); // disable 2x large size

	return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'tm_disable_image_sizes');

[simon]

Um, when I paste your code in I get all the original wordpress image sizes. So first image with my original code:

Second image with your code:

[d19dotca]

I did not upload any new images in my site where I noticed this behaviour after upgrading to 1.7.2. I noticed it as I went to optimize an image by changing it in Bricks from Full to Medium and that’s when I noticed suddenly the other two sizes. The code snippet I have been using all this time is below:

<?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;
}

As you can see I had those image sizes unset. So why would upgrading to Bricks 1.7.2 suddenly make those two visible again? The code snippet has been working for about a year without problems until suddenly Bricks 1.7.2.

It seems likely to me that the label change you mentioned in Bricks 1.7.2 was the culprit. And perhaps our code snippets need to be updated now to use the new image label instead for those two sizes. I’ll test that out later today if I can.

PS - which is the changelog entry that shows or relates to the changing of the image labels like you mentioned? I don’t recall seeing it mentioned in the changelog at all, strangely.

[timmse]

@d19dotca

It seems likely to me that the label change you mentioned in Bricks 1.7.2 was the culprit.

As you can see from the code comment in the screenshot, the two large image sizes were introduced in WordPress 5.3, that is, since November 2019 @d19dotca . If you take a look at Bricks 1.0, you’ll find the exact same code, setting the label text.

Live Test with Dustin’s code (long story short, works for me):

Edit: Maybe it’s worth giving Force regenerate Thumbnails a try:

[d19dotca]

Hi @timmse,

Thank you for those recordings. One thing it looks like in your tests was that you didn’t have Bricks automatically generating custom image sizes from the theme (judging by the fact you didn’t have the Bricks Medium and Bricks Medium Square for example). I wonder if this is perhaps a possible trigger for it. In my sites I have disabled the default WordPress ones other than thumbnail and full because I want to use Brick’s recommended image sizes instead. Maybe this is part of the issue?

I’ll try your recommendation as well when I can about regeneration but I’m pretty sure the site I’ve seen this on is one that always has them disabled as it was one I only started a couple of months ago and my blueprint template for it has that code snippet along with Brick’s custom image size generation enabled. I’ll update when I test that though.

[itchycode]

Hi @simon & @d19dotca ,

I would suggest you to log in your hosting uploads folder to check that specific image.

Check the date and time of the generated image.

As I have tested your code looks good to me and unable to replicate the issue in 1.7.2.

Alternatively, please provide login details for us to check

Regards,
Jenn

[simon]

Hi @itchycode,

The images this issue is occurring on were uploaded to the media library on April 6th. All the images were 640 x 640 original size. As you can see from this screenshot, no 1536 or 2048 image sizes exist in the wordpress uploads folder:

As @d19dotca, I am generating custom image sizes, not by Bricks but via functions.php:

/* ------- 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 );

/* 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’,
);
return array_merge( $size_names, $new_sizes );
}
add_filter( ‘image_size_names_choose’, ‘wpb_custom_image_sizes’ );

As per my original post, I also stop wordpress images sizes being generated with code which has worked up until this issue.

As mentioned it is only since the 1.7.2 update that these two rogue sizes have appeared.

[simon]

I now know what the issue is.

The image with the rogue sizes is being inserted dynamically as a featured image in a query loop. It is in the image size dropdown for the featured image that the rogue sizes appear. If I add the same image into an image element in another container selecting it from the media library, the rogue sizes do not appear, just the correct ones. So it seems it is when the image is being selected as the featured image the sizes are shown.

First screenshot is featured image with rogue sizes in dropdown:

Second screenshot is manually selecting the image from the library:

I can see that the dropdown has to list all possible image sizes as it doesn’t know for a dynamically selected image what the exact sizes are but the two rogue ones shouldn’t be listed.

[DoylePadilla]

I’m sorry I couldn’t be of more help.

[d19dotca]

Great catch, @simon! Yes this definitely seems to be a bug introduced in 1.7.2, or at least maybe coincidentally I hadn’t noticed it earlier as I normally don’t use dynamic images so maybe introduced even earlier. I hope this will be resolved by the Bricks team now that you’ve narrowed that down to dynamic images.

@itchycode, do you view this as a bug in Bricks now? Or is this something different in the WP side?

[itchycode]

Hey @simon & @d19dotca ,

Thank you very much for the detailed test. I am able to replicate this issue when using dynamic data on the Image element inside a loop. (This seems not related to 1.7.2 as I am able to replicate the issue in 1.7 too )

This can be replicated on the Image Gallery element as well without choosing any image and outside of the loop. The default imagesizes incorrect.

Just recorded this into the bug tracker for more investigation

Regards,
Jenn

[timmse]

Hi guys,

We have gone through the issue again internally and have come to the conclusion that it is not a bug.

When selecting a DD image (and not a specific image from the media library) we have to list all registered WP image sizes as we don’t know the DD image size upfront and/or they can change if the DD image changes.

Best regards,
timmse

[d19dotca]

Hi @timmse,

I’m not sure I understand how that was concluded. You said “we have to list all registered WP image sizes”, which makes sense to me but the concern I have is that the code snippet used deregisters various image sizes leaving only the ones Bricks generates, so why is Bricks needing to still show de-registered image sizes in that scenario for dynamic sizing? That part isn’t quite clear to me yet, and makes me feel there is still something wrong here.

PS - Sorry for the late reply, was away on vacation.

[simon]

I agree, from day 1 I have had the code to deregister all wordpress image sizes and have never uploaded an image 2048x2048 so it does seem that there is something wrong here. The code works as I don’t get any wordpress image sizes generated when I upload an image.