Pb with responsive image sizes in WP 4.4

Question

I don't understand how to customize responsive sizes images in WP 4.4.1. The only available hooks that I see are wp_calculate_image_srcset and wp_calculate_image_sizes, and neither has the named image size that was asked for as a parameter. So that would mean that you can correct image sizes, but with no knowledge of the context?

One simple case, with one banner and 3 image sizes :

• Mobile (780x200)
• Tablet (980x250)
• "Desktop" (1600x300).

What I want is to be able to tell WP core that I want those dimensions at width w1, w2 and w3 (which would be here 0-780, 781-980 and 981+), or that I want the named image size mobile for w1, tablet for w2 and desktop for w3.

Anyone have a clue?

Answer 1

I handle the context like this:

function wpse_216001_srcset() {
    // generate your Srcset here and return 
}
function wpse_216001_sizes() {
    // generate your sizes attribute here and return
}

add_filter( 'wp_calculate_image_sizes', 'wpse_216001_sizes', 10 , 2 );
add_filter( 'wp_calculate_image_srcset', 'wpse_216001_srcset', 10 , 5);

// call one of the standard WP image output functions here

remove_filter( 'wp_calculate_image_sizes', 'wpse_216001_sizes', 10 );
remove_filter( 'wp_calculate_image_srcset', 'wpse_216001_srcset', 10 );

You can either do this in your template or make a wrapper function in your functions.php and then call this as a template tag.