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

feat(gatsby-transformer-sharp): Resolver API changes #27783

Merged
merged 184 commits into from
Nov 10, 2020
Merged

Conversation

ascorbic
Copy link
Contributor

@ascorbic ascorbic commented Nov 2, 2020

Following-on from the discussions in #27668, this PR implements the following changes to the resolver:

  • Changes the returned type so that the data is no longer in a sub-field of the gatsbyImage resolver, and is instead returned directly. The resolver is renamed to gatsbyImageData. The new syntax is:
        childImageSharp {
          gatsbyImageData(maxWidth: 800, layout: CONSTRAINED)
        }
  • Move all JPG, PNG and WebP options into individual objects, e.g. jpgOptions, which are passed to sharp. Eventually we can update the schema to support all relevant sharp options, but currently they just support the same options that were previously supported.
  • Move all options related to the base64 placeholder to a blurredOptions object
  • Move all resizing, cropping and other manipulation options such as grayscale and duotone into a new transformOptions object
  • Replace toFormat and webP options with a new formats option, that accepts an array of formats to generate. The default is [AUTO, WEBP], which should be used in most cases.
  • Remove srcSetBreakpoints. This should be replaced with the equivalent outputPixelDensities value.

@ascorbic ascorbic requested a review from a team as a code owner November 2, 2020 13:24
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Nov 2, 2020
@ascorbic ascorbic added topic: sharp and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Nov 2, 2020
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.

Looks good :) I have nothing concrete but tests are failing so I'll leave them as comments.

packages/gatsby-plugin-sharp/src/image-data.ts Outdated Show resolved Hide resolved
@@ -415,6 +415,10 @@ const imageNodeType = ({
},
maxHeight: {
type: GraphQLInt,
description: stripIndent`
If set, the generated image is a maximum of this height, cropping if necessary.
If the image layout is "constrained" then the image will be limited to this height.
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this true? It's limited to maxHeight for constrained unless the original image height is less than that.

@ascorbic ascorbic requested a review from a team as a code owner November 9, 2020 18:27
@@ -284,7 +284,7 @@ export const query = graphql`
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
gatsbyImageData(layout: FIXED, width: 125, height: 125)
gatsbyImageData(layout: FIXED, width: 125, height: 125)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

🤦‍♂️

Copy link
Contributor

@vladar vladar left a comment

Choose a reason for hiding this comment

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

Looks good to me 👍 But I would prefer another pair of eyes on this as I don't have enough context.

@ascorbic ascorbic merged commit fe0b5de into master Nov 10, 2020
@delete-merged-branch delete-merged-branch bot deleted the resolver-api-changes branch November 10, 2020 12:58
@didia
Copy link
Contributor

didia commented Dec 6, 2020

Hello @ascorbic, is this change supposed to work with the current gatsby-image plugin ? Updating to this version of gatsby-transformer-sharp is now breaking in my project with error Input file contains unsupported image format

You can see here: https://github.com/didia/didia.me/pull/738/checks?check_run_id=1507185101

@ascorbic
Copy link
Contributor Author

ascorbic commented Dec 6, 2020

Hi @didia ,
I don't believe this is related. It's now likely related to the upgrade to sharp. Could you open an issue for it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants