docs(gatsby-image): Deprecate sizes and resolutions props (#26309)

Some users are still using these props accidentally due to their visibility in guides.
gatsbyjs · Aug 10, 2020 · 5968b3c · 5968b3c
1 parent 358d030
commit 5968b3c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md
@@ -352,10 +352,10 @@ These examples should handle a fair number of use cases. A couple of bonus thing
 `gatsby-image` has a feature that gives you the ability to set an aspect ratio to constrain image proportions. This can be used for fixed or fluid processed images; it doesn't matter.
 
 ```jsx
-<Img sizes={{ ...data.banner.childImageSharp.fluid, aspectRatio: 21 / 9 }} />
+<Img fluid={{ ...data.banner.childImageSharp.fluid, aspectRatio: 21 / 9 }} />
 ```
 
-This example uses the `sizes` option on the `Img` component to specify the `aspectRatio` option along with the fluid image data. This processing is made possible by `gatsby-plugin-sharp`.
+This example uses the `fluid` option on the `Img` component to specify the `aspectRatio` option along with the fluid image data. This processing is made possible by `gatsby-plugin-sharp`.
 
 ## Bonus Error
 

diff --git a/docs/tutorial/wordpress-image-tutorial.md b/docs/tutorial/wordpress-image-tutorial.md
@@ -149,15 +149,15 @@ Here’s an example of creating specific widths and heights for images:
             localFile {
               childImageSharp {
                 # Try editing the "width" and "height" values.
-                resolutions(width: 200, height: 200) {
+                fixed(width: 200, height: 200) {
                   # In the GraphQL explorer, use field names
                   # like "src". In your site's code, remove them
                   # and use the fragments provided by Gatsby.
                   src
 
                   # This fragment won't work in the GraphQL
                   # explorer, but you can use it in your site.
-                  # ...GatsbyImageSharpResolutions_withWebp
+                  # ...GatsbyImageSharpFixed_withWebp
                 }
               }
             }
@@ -215,16 +215,15 @@ import Img from "gatsby-image"
 const IndexPage = ({ data }) => {
   const imagesResolutions = data.allWordpressPost.edges.map(
     edge =>
-      edge.node.childWordPressAcfPostPhoto.photo.localFile.childImageSharp
-        .resolutions
+      edge.node.childWordPressAcfPostPhoto.photo.localFile.childImageSharp.fixed
   )
   return (
     <div>
       <h1>Hi people</h1>
       <p>Welcome to your new Gatsby site.</p>
       <p>Now go build something great.</p>
       {imagesResolutions.map(imageRes => (
-        <Img resolutions={imageRes} key={imageRes.src} />
+        <Img fixed={imageRes} key={imageRes.src} />
       ))}
       <Link to="/page-2/">Go to page 2</Link>
     </div>
@@ -243,8 +242,8 @@ export const query = graphql`
               localFile {
                 childImageSharp {
                   # edit the maxWidth value to generate resized images
-                  resolutions(width: 500, height: 500) {
-                    ...GatsbyImageSharpResolutions_withWebp_tracedSVG
+                  fixed(width: 500, height: 500) {
+                    ...GatsbyImageSharpFixed_withWebp_tracedSVG
                   }
                 }
               }

diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
@@ -25,10 +25,12 @@ const convertProps = props => {
 
   if (resolutions) {
     convertedProps.fixed = resolutions
+    logDeprecationNotice(`resolutions`, `the gatsby-image v2 prop "fixed"`)
     delete convertedProps.resolutions
   }
   if (sizes) {
     convertedProps.fluid = sizes
+    logDeprecationNotice(`sizes`, `the gatsby-image v2 prop "fluid"`)
     delete convertedProps.sizes
   }