4

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?

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
    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
    Oct 24, 2018 at 18:15

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.