From 67a1ef2f3eacb8c735aecaae8485a3047117013b Mon Sep 17 00:00:00 2001 From: jpavlicek Date: Sun, 6 Jan 2019 19:41:35 +0100 Subject: [PATCH 1/2] add first RFC draft --- text/0000-sharp-exclude-original.md | 98 +++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 text/0000-sharp-exclude-original.md diff --git a/text/0000-sharp-exclude-original.md b/text/0000-sharp-exclude-original.md new file mode 100644 index 0000000..776f4d5 --- /dev/null +++ b/text/0000-sharp-exclude-original.md @@ -0,0 +1,98 @@ +- Start Date: 2019-01-06 +- RFC PR: (leave this empty) +- Gatsby Issue: (leave this empty) + +# Summary + +Right now when you're using `gatsby-plugin-sharp` and `gatsby-transformer-sharp` for GraphQL image queries you always get the original image returned in your `srcset` no matter which maxWidth is set. I want to be able to exclude the original image. So you can decide if you want to deploy the original image (which would be the default) or not (new flag in GraphQL query). + +# Basic example + +``` JavaScript +// current usage +export const query = graphql` + query { + myImage: file( + relativePath: { eq: "shop/myimage.jpg" } + ) { + childImageSharp { + fluid(maxWidth: 800) { + ...GatsbyImageSharpFluid_noBase64 + } + } + } + } +` +``` + +``` HTML + +
alt text
+``` + +# Motivation + +The default behaviour would be fine for image galleries. But if you don't want to deploy the original image you would have to use an image editor to change the image to your desired max size. This feature would allow to use big images for building your Gatsby page but not deploying them. + +# Detailed design + +The design can be seen here: https://github.com/gatsbyjs/gatsby/compare/master...jpavlicek:master?expand=1 +It is just a feature flag for your query and you can decide for each query if you want to exclude the original image. + + + +``` JavaScript +// Desired usage +export const query = graphql` + query { + myImage: file( + relativePath: { eq: "shop/myimage.jpg" } + ) { + childImageSharp { + fluid(maxWidth: 800, excludeOriginal: false) { + ...GatsbyImageSharpFluid_noBase64 + } + } + } + } +` +``` + +``` HTML + +
alt text
+``` + + +# Drawbacks + +Right now I don't see any big drawbacks. The complexity and implementation cost is low and it does not touch the current behaviour, it just extends it. + +# Alternatives + +I don't see any alternative besides extending the plugins `gatsby-plugin-sharp` and `gatsby-transformer-sharp`. + +# Adoption strategy + +Existing Gatsby users can adopt it via upgrading their plugins and setting the feature flag. + +# How we teach this + +`excludeOriginal` as name of the GraphQL flag. Perhaps `excludeSourceImage` could be a better fit. + +The documentation would get a few new lines but it does not change how Gatsby is taught to new developers. + +# Unresolved questions + +Right now the unit tests for this new feature are missing. From 10a75264d695a016062253cd95cac8e5a28cf694 Mon Sep 17 00:00:00 2001 From: jpavlicek Date: Thu, 10 Jan 2019 12:31:14 +0100 Subject: [PATCH 2/2] fix boolean flag --- text/0000-sharp-exclude-original.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/text/0000-sharp-exclude-original.md b/text/0000-sharp-exclude-original.md index 776f4d5..8007c50 100644 --- a/text/0000-sharp-exclude-original.md +++ b/text/0000-sharp-exclude-original.md @@ -55,7 +55,7 @@ export const query = graphql` relativePath: { eq: "shop/myimage.jpg" } ) { childImageSharp { - fluid(maxWidth: 800, excludeOriginal: false) { + fluid(maxWidth: 800, excludeOriginal: true) { ...GatsbyImageSharpFluid_noBase64 } }