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

Merged
merged 2 commits into from Aug 7, 2018

Conversation

Projects
None yet
5 participants
@fabianpimminger
Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor Author

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/

@youknowriad
Copy link
Contributor

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

codecov/project 51.08% (-0.04%) compared to 576872f
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@gravnetic

This comment has been minimized.

Copy link

gravnetic commented Aug 7, 2018

Wonderful!

@azaozz

This comment has been minimized.

Copy link
Contributor

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

@mtias mtias added the Media label Aug 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.