Let Wordpress make images in gallery block responsive / add srcset attribute #8593
Conversation
|
For reference, wp_make_content_images_responsive() adds the srcset attributes after it finds an image without srcset attribute and with a wp-image-ID class. https://developer.wordpress.org/reference/functions/wp_make_content_images_responsive/ |
youknowriad
left a comment
There was a problem hiding this comment.
LGTM 👍
Thanks, this is a great improvement.
|
Wonderful! |
|
Nice! This is a good first step but it needs quite a bit more :) See #6177 that @mor10 linked above. Another thing that can be done right now (before 6177) is to use the "large" image size by default (if it exists), then Next step would be to look at the actual width of images and set |
The AB Container block background image did not have a srcset. Adding the class wp-image-[ID] to the img tag triggers WP to add a srcset to the image. For more info see: WordPress/gutenberg#8593
Description
Wordpress makes images with a wp-image-ID class responsive using a srcset attribute. This PR adds the needed class to the images in the gallery block. See #4898 for a similar fix for the image block.
Would help for #1450 because the browser should then only download the appropriate image sizes.
Fixes: #5674
Related: #2900
How has this been tested?
Upload images, create a gallery and view on the front-end. It should have added srcset attributes.
I've also run
npm testandnpm run lintTypes of changes
My code adds the wp-image-ID class to the images in the gallery block. I also edited the wordpress-out.html test to reflect this change.
Checklist: