post thumbnails - wordpress responsive image srcset not working

admin管理员组

文章数量:1122832

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?

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?

• post-thumbnails
• images
• responsive

Share Improve this question asked Oct 24, 2018 at 16:12 trikutintrikutin 14311 silver badge44 bronze badges 2

• Take a look here and read where it explains 'Setting up the function' to define your own post thumbnail func. iamsteve.me/blog/entry/… – cstls Commented Oct 24, 2018 at 18:00
• But wordpress have automated function and it's working on a lot of themes. I just didn't understand what is problem with my code. – trikutin Commented Oct 24, 2018 at 18:15

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： post thumbnailswordpress responsive image srcset not working