One of my image sizes isn't showing up in srcset

Question

So for I've added some custom image sizes like this:

add_action('after_setup_theme', 'image_sizes_setup');
    function image_sizes_setup(){
      add_theme_support( 'post-thumbnails' );

      add_image_size('thumb-small-2x', 196, 9999);
      add_image_size('thumb-medium-2x', 276, 9999);
      add_image_size('portrait-thumb-large-2x', 328, 9999);
      add_image_size('landscape-thumb-large-2x', 9999, 328);
      add_image_size('small-2x', 900, 600);
      add_image_size('medium-2x', 1200, 800);
      add_image_size('large', 1920, 1280);
      add_image_size('large-large-2x', 2160, 1440);
      add_image_size('extra-large-2x', 2400, 1600);
    }

Then I wrote this code so I can select them in the media manager

add_filter( 'image_size_names_choose', 'custom_image_sizes_choose' );
    function custom_image_sizes_choose( $sizes ) {
        $custom_sizes = array(
            'thumb-small-2x' => 'Thumb Small',
            'thumb-medium-2x' => 'Thumb Medium',
            'portrait-thumb-large-2x' => 'Thumb Portrait Large',
            'landscape-thumb-large-2x' => 'Thumb Landscape Large',
            'small-2x' => 'Small',
            'medium-2x' => 'Medium',
            'large' => 'Large',
            'large-large-2x' => 'Large Large',
            'extra-large-2x' => 'Extra Large',
        );
        return array_merge( $sizes, $custom_sizes );
    }

And I display it in one of my templates with this

add_action('genesis_after_header', 'ts_show_featured_image');
    function ts_show_featured_image(){
      if ( has_post_thumbnail()):
          echo'<div class="gallery header-image">';
          the_post_thumbnail( 'extra-large-2x', array( 'class' => 'featured-image' ) );
          echo '</div>';
      endif;
    }

The html of the img tag is served as:

<img
  width="2400"
  height="1600"
  src="http://example.com/wp-content/uploads/2016/04/Picture-6.jpg"
  class="featured-image wp-post-image"
  alt="Picture"
  srcset="
    http://example.com/wp-content/uploads/2016/04/Picture.jpg 2400w,
    http://example.com/wp-content/uploads/2016/04/Picture-768x512.jpg 768w,
    http://example.com/wp-content/uploads/2016/04/Picture-276x184.jpg 276w,
    http://example.com/wp-content/uploads/2016/04/Picture-328x219.jpg 328w,
    http://example.com/wp-content/uploads/2016/04/Picture-492x328.jpg 492w,
    http://example.com/wp-content/uploads/2016/04/Picture-900x600.jpg 900w,
    http://example.com/wp-content/uploads/2016/04/Picture-1200x800.jpg 1200w"
  sizes="(max-width: 2400px) 100vw, 2400px"
>

So everything is as it should be just the 2160x1440 and 1920x1280 images aren't in the srcset. They are the same aspect ratio as all the others (minus the thumbnails, but those are besides the point. I even commented out the thumbnail sizes and regenerated thumbnails just to be sure and the same issue is there).

I tried being thorough, if you need more information just let me know. Thanks a lot! It's driving me crazy.

So any ideas why they aren't showing up?

Answer 1

Just gong to post the answer here too. @Dan linked to another question that had the answer.

Here's some documentation on the new responsive images feature:

Responsive Images in WordPress 4.4

The default max-size that will go into a srcset is 1600px wide. So if you plan on using images that are bigger than that, you need to change that.

It can be changed like this:

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2000;
}, 10, 2);

Where 2000 is the new max width.