-
Notifications
You must be signed in to change notification settings - Fork 799
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
Tiled Gallery block: Add server render srcset #11397
Conversation
Caution: This PR has changes that must be merged to WordPress.com |
2aa4317
to
edff3f9
Compare
This comment has been minimized.
This comment has been minimized.
sirreal, Your synced wpcom patch D24729-code has been updated. |
Noting that having "lazy images" feature enabled also fiddles with these attributes, so it's important to verify this works with that module on or off. |
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested this in Jetpack, and I would have a few questions, and a concern:
Currently on master
, if I create a squared gallery it ends up loading 800px-wide images in a space where only 692px can fit:
It's not perfect, but that works.
With this PR, however, it ends up loading the 600px version of the image, thus upscaling it a little, which is definitely not ideal:
I've been unable to reproduce this on my Jetpack site. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
but when I disable lazy loading images, I don't get square layout working
So this was due be building blocks bundle with Automattic/wp-calypso#30724 — with the latest master build from Calypso all works great. 👍
I've tested with and without Lazy loading images, with and without carousel features as well.
223729e
to
cecce29
Compare
sirreal, Your synced wpcom patch D24729-code has been updated. |
Rebased + addressed PHP linter complaining about filename. @kraftbj good for another look! :-) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's an issue that exists in master per @simison preventing images from getting the ssl arg, so approving this to merge and will fix that up in an upcoming PR.
D24729-code still needs to be deployed but since this touches only one infrequently updated file and it's night in Europe, I'm leaving it for tomorrow for less risky wpcom deploy. Tracking editor dropping |
D24729-code (this diff) requires D27606-code |
r191530-wpcom |
Related to https://github.com/Automattic/wp-calypso/issues/30118
Add
srcset
to Tiled Gallery blocks. This adds asrcset
which will provide improved image sizes using photon.Compainion to #12061
It provides a number of alternatives in the srcset, between a calculated minimum and maximum, with a step.
Current values:
600px
2000px
300px
There were enough changes that it felt appropriate to rework the simple block registration as part of a class that serves to namespace some functions.
Questions
Are the minimum and maximum values appropriate? The maximum
2000px
was found to be around the Photon threshold on the image size in bytes.Is the step appropriate? Should we have more or less alternatives?
Testing
img[src]
is preserved and correct (should be the same as thesrc
in the code editor)img[srcset]
looks goodsrcset
results in different image sizes loading at different viewport widths. Note that different browsers may exhibit slightly different behavior.img
requests in your network tab. Filter on/(i[0-2]\.wp\.com)|(files\.wordpress\.com)/
to see only photon requests.It's very important to test all the different layouts!
Also verify the same behavior in D24729-code for Simple sites.