fix(gatsby-plugin-sharp): tracedSVG for fluid images should respect…

… forced aspect ratio (#9337) Ref. #9204, not sure if this is the right way to go… - split the [traced-svg](https://using-gatsby-image.gatsbyjs.org/traced-svg/) gallery into two—cropped and uncropped—to demonstrate the fix
gatsbyjs · Apr 16, 2019 · 2fed2c7 · 2fed2c7
1 parent e9e6d4e
commit 2fed2c7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git a/examples/using-gatsby-image/src/pages/traced-svg.js b/examples/using-gatsby-image/src/pages/traced-svg.js
@@ -29,6 +29,7 @@ const TracedSVG = ({ data, location }) => (
     <Lorem />
     <h2>Unsplash</h2>
     <ImageGallery images={data.galleryImages.edges} />
+    <ImageGallery images={data.galleryImagesCropped.edges} />
     <Ipsum />
     <Img
       fluid={data.fullWidthImage.localFile.childImageSharp.fluid}
@@ -90,7 +91,32 @@ export const query = graphql`
         }
       }
     }
-    galleryImages: allUnsplashImagesYaml(filter: { gallery: { eq: true } }) {
+    galleryImages: allUnsplashImagesYaml(
+      filter: { gallery: { eq: true } }
+      limit: 10
+    ) {
+      edges {
+        node {
+          credit
+          title
+          localFile {
+            childImageSharp {
+              fluid(
+                maxWidth: 380
+                quality: 70
+                traceSVG: { background: "#fbfafc", color: "#dbd4e2" }
+              ) {
+                ...GatsbyImageSharpFluid_tracedSVG
+              }
+            }
+          }
+        }
+      }
+    }
+    galleryImagesCropped: allUnsplashImagesYaml(
+      filter: { gallery: { eq: true } }
+      skip: 10
+    ) {
       edges {
         node {
           credit
@@ -99,6 +125,7 @@ export const query = graphql`
             childImageSharp {
               fluid(
                 maxWidth: 380
+                maxHeight: 380
                 quality: 70
                 traceSVG: { background: "#fbfafc", color: "#dbd4e2" }
               ) {

diff --git a/packages/gatsby-plugin-sharp/src/trace-svg.js b/packages/gatsby-plugin-sharp/src/trace-svg.js
@@ -69,7 +69,22 @@ const optimize = svg => {
 }
 
 exports.notMemoizedtraceSVG = async ({ file, args, fileArgs, reporter }) => {
-  const options = healOptions(getPluginOptions(), fileArgs, file.extension)
+  const options = healOptions(
+    getPluginOptions(),
+    {
+      // use maxWidth/maxHeight as width/height if available
+      // if width/height is used in fileArgs, the maxWidth/maxHeight
+      // values will be overritten
+      ...(fileArgs && fileArgs.maxWidth && fileArgs.maxHeight
+        ? {
+            height: fileArgs.maxHeight,
+            width: fileArgs.maxWidth,
+          }
+        : {}),
+      ...fileArgs,
+    },
+    file.extension
+  )
 
   const tmpFilePath = `${tmpDir}/${file.internal.contentDigest}-${
     file.name