filters for responsive image srcset and sizes attributes

[Hube2]

I think that hooks need to be added to the new responsive image features that allow the filtering of the srcset and the sizes attributes, which as far as I can see there isn't any way to modify what WP creates at any step of the operation.

Why does this need to be added. I have clients that want to be able to specify alternate images. Meaning that for some screen sizes they want to use an image that has been modified and cropped to a different ratio. This allows them to have a short wide image on large screens and a tall narrow image on narrow screens.

Lets look at the facts. If you take an image that is 1200x300 and reduce that image to 300x75, or worse 150x37, that image is going to be pretty useless as far as conveying any information is concerned. At that point the image may as well not be there.

Selecting alternate images that are cropped at different ratios allows the client to add an image that is taller and narrow that conveys the same information and can actually be seen on a narrow screen.

I don't expect WP to make it possible for users to actually do this alternate image selection. This is something that I can and have added to WP it the past.

What I would like is a way to filter the size and srcset attributes so that I can make the needed changes to accomplish what the client wants.

This is not something that I have encountered only once or once in a while, this is requirement that I run into consistently.

As it stands, the only way that I can meet this requirement since WP4.4 is to completely disable all of the filters used by WP to accomplish it and substitute my own, which I would prefer not to do.

Thanks for considering it.

[joemcgill]

Hi @Hube2,

Thanks for the request. I may be misunderstanding, but it sounds like you're trying to implement the ​art direction use case, which is where you would use different crops and/or aspect ratios at specific breakpoints, rather than different sizes of the same image. Is that correct?

If so, then srcset and sizes attributes on an <img> element aren't really the right tool for the job. Instead, you'll want to use the <picture> element, where you can specify a set of sources at different breakpoints.

It I'm misunderstanding, could you give an example of the markup you'd like to be able to produce?

Thanks,
Joe

[Hube2]

Has WP started supporting some type of <picture> element editor or some other way to insert this element into the content that I've somehow missed?

If not then my problem is simple, my clients are not capable of adding the html needed. This is great for those of us that do code but I build sites for people with no coding skills and no desire to learn these skills, they just want to put an image into the content. I have built custom fields that allow them to select alternate images while they are adding the image.

[joemcgill]

Hi @Hube2,

Apologies for the delay in responding. You're correct that WordPress doesn't have any native support for the <picture> element, which is what you would likely need to produce in order to allow your clients to display images with different ratios depending on the viewport width. For the time being, I suggest building custom fields, as you are doing, and use them to build your own markup. If you do need to filter the srcset and sizes values, you can use the wp_calculate_image_srcset and wp_calculate_image_sizes filters.