Cannot use timmy responsive content images with wordpress responsive images in combination

[sque89]

Currently as a theme editor i need to if i want to use the reponsive content images from timmy or if wordpress should make the images reponsive.

With timmy we can define the reponsiveness of content images in a way more detailed way (as it should be) but it only works if the content editor manually selects the correct image size, which has the inherent risk that a content editor just does not do it for whatever reason which ends up with non optimized images.

On the other hand wordpress can automatically make images reponsive but in a very unflexible way which is basically only helpful for full width images like the cover block.

But as full width images like the cover block are several times larger than other content images those are the most important parts when it comes to repsonsive images.

Until wordpress implements responsive images which a theme editor can really configure i think, in the case where it is not sure that the content editors are always setting the correct image sizes, the best workaround would be:

1. for normal use cases like 1 or 2 columned images in the post content use timmy, if the editor does not set the correct image size it does not hurt so much
2. for very important images like the fullscreen cover let wordpress automatically make the image responsive to be sure it is not leave unoptimized

Currently this is not achievable because timmy disables the wordpress reponsive image feature when opting in to the timmy reponsive image feature.

I dont know if there is a good way to make them work together and let wordpress do the optimization stuff if timmy is not finding the correct size.

But at least i wanted to make aware of the situation. Maybe there are other good solutions as well.

Thanks!

[gchtr]

Sorry for the late answer. I fully agree with you that’s it’s not an optimal solution right now. It’s hard to explain to content editors which size they should choose for which use case.

That’s why for our websites, we developed our own image block where this case is handled automatically. If used in a column context, we can automatically use the optimal size for the image because we can pass down the number of columns with Block Context. But for this to work properly, we also developed our own column block.

The same goes for cover blocks. We use our own header block so that the featured images can automatically take their optimal size depending on the use case.

Of course developing custom blocks is not for everyone.

I don’t know if there is a good way either. Maybe we would have to completely rework the Responsive Content Images functionality. There’s tons of filters in wp_filter_content_tags() and the underlying functions that we could use. Maybe we could hook into the filters there and process each image individually instead of just disabling that functionality all together.

I didn’t have the resources to look more into that, because we have a solution that is working fine for us using custom blocks. But I’m open to help with finding a good solution for this if someone wants to take this on.