wordpress responsive image srcset not working

Question

I'm trying use wordpress core responsive image feature but it's not adding srcset to image. Here is th my codes

I have a div w=370px h=280px now I added image sizes

if(function_exists('add_image_size')){
add_image_size( 'imagebox', 370, 280, true );
add_image_size( 'imagebox-2x', 840, 560, true );
add_image_size( 'imagebox-3x', 1110, 840, true );}

And calling it inside the loop like this

the_post_thumbnail('imagebox-2x');

it's adding only image like this 2x version without srcset

<img width="840" height="560" src="http://localhost/starter/wp-content/uploads/2018/10/04004_theblackandwhiterocky_2560x1600-840x560.jpg" class="attachment-imagebox-2x size-imagebox-2x wp-post-image" alt="">

If I remove the image size from the_post_thumbnail and use it only the_post_thumbnail(); it's working with responsive images but without my sizes

<img width="180" height="180" src="http://localhost/starter/wp-content/uploads/2018/10/04004_theblackandwhiterocky_2560x1600-180x180.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost/starter/wp-content/uploads/2018/10/04004_theblackandwhiterocky_2560x1600-180x180.jpg 180w, http://localhost/starter/wp-content/uploads/2018/10/04004_theblackandwhiterocky_2560x1600-150x150.jpg 150w" sizes="(max-width: 180px) 100vw, 180px">

How can I fix this?

Answer 1

If you edited the image (crop or rotate) after inserting it into the post and then changed the image sizes but you don't update the post that the image appears in to use the new sizes, you can find yourself in this situation. This is intentional behavior. It keeps WordPress from displaying an image in dimensions that were not originally intended and instead displays what was actually inserted into the post.

This is from the WordPress core (wp-includes/media.php):

// Bail early if an image has been inserted and later edited.
if ( preg_match( '/-e[0-9]{13}/', $image_meta['file'], $img_edit_hash ) &&
    strpos( wp_basename( $image_src ), $img_edit_hash[0] ) === false ) {

    return $image;
}

The solution is to first go into the media folder and then regenerate the thumbnails using the Regenerate Thumbnails plugin if they don't already exist. Then go into the the post where the image is being used, and either delete the image and re-insert it or select it and choose a new, registered size for it. There is no workaround or setting that I am aware of to override this behavior (but maybe there should be…)

Please let me know if this works for you.