Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Let Wordpress make images in gallery block responsive / add srcset attribute #8593

Conversation

@fabianpimminger
Copy link
Contributor

@fabianpimminger fabianpimminger commented Aug 6, 2018

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 test and npm run lint

Types 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:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
@fabianpimminger
Copy link
Contributor Author

@fabianpimminger fabianpimminger commented Aug 6, 2018

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/
https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

Copy link
Contributor

@youknowriad youknowriad left a comment

LGTM 👍

Thanks, this is a great improvement.

@youknowriad youknowriad merged commit d5eb120 into WordPress:master Aug 7, 2018
2 checks passed
2 checks passed
@codecov
codecov/project 51.08% (-0.04%) compared to 576872f
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@gravnetic
Copy link

@gravnetic gravnetic commented Aug 7, 2018

Wonderful!

@azaozz
Copy link
Contributor

@azaozz azaozz commented Aug 9, 2018

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 image.url would point to it instead of the full-size image.

Next step would be to look at the actual width of images and set sizes accordingly, i.e. in a three column gallery they should be 1/3 of the theme width, etc.

@mtias mtias added this to the 3.5 milestone Aug 9, 2018
tristanmason added a commit to tristanmason/atomic-blocks that referenced this pull request Sep 15, 2019
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

5 participants