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.

Sign up for GitHub

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

Jump to bottom

fix(gatsby-plugin-image): Fix handling of sizes prop in SSR #28835

Merged
merged 9 commits into from
Jan 5, 2021
Merged

fix(gatsby-plugin-image): Fix handling of sizes prop in SSR #28835

merged 9 commits into from
Jan 5, 2021

Conversation

ascorbic
Copy link
Contributor

@ascorbic ascorbic commented Jan 4, 2021

The sizes prop was being incorrectly handled in SSR. It should be using the property of the fallback image, not a top-level sizes prop.

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jan 4, 2021
@ascorbic ascorbic added topic: media Related to gatsby-plugin-image, or general image/media processing topics and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jan 4, 2021
pvdz
pvdz previously approved these changes Jan 4, 2021
View reviewed changes
Copy link
Contributor

@pvdz pvdz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deja-vu ;)

The spread will pass on an unknown set of properties. I'd prefer to see them set explicitly. But not blocking you on this. Feel free to ignore the suggestion.

packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -49,7 +49,6 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
layout,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
layout,
layout,
fallback,

packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
Comment on lines 65 to +67
if (images.fallback) {
cleanedImages.fallback = {
src: images.fallback.src,
...images.fallback,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (images.fallback) {
cleanedImages.fallback = {
src: images.fallback.src,
...images.fallback,
if (fallback) {
cleanedImages.fallback = {
...fallback,

@ascorbic ascorbic added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Jan 4, 2021
@ascorbic ascorbic force-pushed the fix/image-ssr-sizes-prop branch from 6883d93 to 8f4482f Compare January 4, 2021 16:14
laurieontech
laurieontech reviewed Jan 4, 2021
View reviewed changes
Copy link
Contributor

@laurieontech laurieontech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general this looks good. I'd like to include an e2e test with sizes as a prop since that case isn't covered and this feels like a good opportunity.

@ascorbic ascorbic requested a review from laurieontech January 5, 2021 13:06
laurieontech
laurieontech reviewed Jan 5, 2021
View reviewed changes
Copy link
Contributor

@laurieontech laurieontech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the test additions. Is it still the case that with some sizes data will override the automatic sizes? That's the main use case I'm worried we waren't testing.

e2e-tests/gatsby-static-image/src/pages/constrained.js Outdated Show resolved Hide resolved
@ascorbic
Copy link
Contributor Author

ascorbic commented Jan 5, 2021

@laurieontech Ah, gotcha. Added a test for that

@ascorbic ascorbic requested a review from laurieontech January 5, 2021 14:24
laurieontech
laurieontech approved these changes Jan 5, 2021
View reviewed changes
Copy link
Contributor

@laurieontech laurieontech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@gatsbybot gatsbybot merged commit a135c50 into master Jan 5, 2021
@gatsbybot gatsbybot deleted the fix/image-ssr-sizes-prop branch January 5, 2021 15:06
@gatsbybot gatsbybot mentioned this pull request Jan 5, 2021
Merged
vladar pushed a commit that referenced this pull request Jan 5, 2021
@ascorbic @vladar
fix(gatsby-plugin-image): Fix handling of sizes prop in SSR (#28835)
ee97904 
* fix(gatsby-plugin-image): Fix handling of sizes prop in SSR

* Update tests

* Update tests

* Fix types

* Update e2e tests

* Update e2e-tests/gatsby-static-image/src/pages/constrained.js

Co-authored-by: LB <[email protected]>

* Add test for size override

Co-authored-by: gatsbybot <[email protected]>
Co-authored-by: LB <[email protected]>
(cherry picked from commit a135c50)
vladar pushed a commit that referenced this pull request Jan 5, 2021
@ascorbic
fix(gatsby-plugin-image): Fix handling of sizes prop in SSR (#28835) (#…
6b7c5e7 
…28867)

* fix(gatsby-plugin-image): Fix handling of sizes prop in SSR

* Update tests

* Update tests

* Fix types

* Update e2e tests

* Update e2e-tests/gatsby-static-image/src/pages/constrained.js

Co-authored-by: LB <[email protected]>

* Add test for size override

Co-authored-by: gatsbybot <[email protected]>
Co-authored-by: LB <[email protected]>
(cherry picked from commit a135c50)

Co-authored-by: Matt Kane <[email protected]>
@nidhi42 nidhi42 mentioned this pull request Nov 5, 2022
Open
This was referenced Nov 5, 2022
Open
Open
@nidhi42 nidhi42 mentioned this pull request Nov 5, 2022
Open
@kaocher82 kaocher82 mentioned this pull request Nov 5, 2022
Open
This was referenced Nov 5, 2022
Open
Open
@ajesse11x ajesse11x mentioned this pull request Nov 5, 2022
Open
@kaocher82 kaocher82 mentioned this pull request Nov 5, 2022
Open
@0xSebin 0xSebin mentioned this pull request Nov 5, 2022
Open
@ajesse11x ajesse11x mentioned this pull request Nov 5, 2022
Open
@snyk-bot snyk-bot mentioned this pull request Nov 6, 2022
Open
@saurabharch saurabharch mentioned this pull request Dec 25, 2022
Open
@nidhi42 nidhi42 mentioned this pull request Dec 25, 2022
Open
@snyk-bot snyk-bot mentioned this pull request Dec 25, 2022
Open
@ajesse11x ajesse11x mentioned this pull request Dec 25, 2022
Open
@kaocher82 kaocher82 mentioned this pull request Dec 25, 2022
Open
@0xSebin 0xSebin mentioned this pull request Dec 25, 2022
Open
@ajesse11x ajesse11x mentioned this pull request Dec 25, 2022
Open
@nidhi42 nidhi42 mentioned this pull request Dec 25, 2022
Open
This was referenced Dec 25, 2022
Open
Open
@nidhi42 nidhi42 mentioned this pull request Dec 25, 2022
Open
@kaocher82 kaocher82 mentioned this pull request Dec 26, 2022
Open
@snyk-bot snyk-bot mentioned this pull request Dec 26, 2022
Open
@0xSebin 0xSebin mentioned this pull request Dec 26, 2022
Open
@kaocher82 kaocher82 mentioned this pull request Dec 27, 2022
Open
@nidhi42 nidhi42 mentioned this pull request Jun 21, 2023
Open
@ajesse11x ajesse11x mentioned this pull request Jun 21, 2023
Open
@saurabharch saurabharch mentioned this pull request Jun 21, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@laurieontech laurieontech laurieontech approved these changes

@pvdz pvdz pvdz left review comments

Assignees
No one assigned
Labels
bot: merge on green Gatsbot will merge these PRs automatically when all tests passes topic: media Related to gatsby-plugin-image, or general image/media processing topics
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@ascorbic @pvdz @laurieontech @gatsbybot