the_post_thumbnail responsive srcset not populating with custom image size

Question

I am trying to use the new responsive images feature in Wordpress 4.4 but I keep running into a particular problem when trying to use the_post_thumbnail with a custom image size. It seems I cannot use custom image sizes.

The following code will produce an img tag with the srcset present:

<?php the_post_thumbnail('medium',  array( 'class' => 'img-responsive' )); ?>

Here is what the img tag looks like with the medium size passed into the function:

<img width="300" height="225" src="path/to/image-300x225.jpg" class="img-responsive wp-post-image" alt="Image" srcset="path/to/image-300x225.jpg 300w, path/to/image-768x576.jpg 768w, path/to/image.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px">

However, when I make one change to use my custom image size, the srcset disappears. Does anyone know what is going on here?

Here is how I added my custom image size:

add_image_size ('my-custom-size', 1050, 626, true );

Here is how it looks in the code:

<?php the_post_thumbnail('my-custom-size',  array( 'class' => 'img-responsive' )); ?>

And here is what it outputs, notice that my-custom-size is not being read and it is instead adding in wp-post-image instead of my-custom-size:

<img width="1024" height="626" src="path/to/image-1024x626.jpg" class="img-responsive wp-post-image" alt="Image">

Please help me understand what I am doing wrong!

Answer 1

There's not enough info to be sure this answer is definitive but here's an attempt.

Firstly make sure the image you are uploading is actually larger than the size you have defined. I see people upload images that are too small and then get this sort of result all the time.

Secondly, WP will only make up a Srcset list of image sizes with the same aspect ratio. If your custom size had a different aspect ratio to other image sizes then you can create a selection of new sizes with aspect ratios that match.

Thirdly, after changing or adding new image sizes you must always regenerate existing thumbnails. There's a great plugin called Regenerate Thumbnails for this.