[gatsby-image] color of tracedSVG using Contentful fragments

[yesh]

Hi,

I am trying to change the color of the tracedSVG of images from Contentful using gatsby-image.

Summary

digging in the docs and around the web I found that you can put a traceSVG argument with various options in a graphql query, like this:

traceSVG: { background: "#fbfafc", color: "#dbd4e2" }

like in this example:

galleryImages: allUnsplashImagesYaml(filter: { gallery: { eq: true } }) {
  edges {
    node {
      credit
      title
      localFile {
        childImageSharp {
          fluid(
            maxWidth: 380
            quality: 70
            traceSVG: { background: "#fbfafc", color: "#dbd4e2" }
          ) {
            ...GatsbyImageSharpFluid_tracedSVG
          }
        }
      }
    }
  }
}

but this method is not working for my case, because I use a ContentfulAsset type field, like this:

query projectQuery($title: String!) {
    contentfulProject(title: {
      eq: $title
    }) {
      images {
        fluid(
          maxWidth: 600,
          quality: 95
        ) {
          ...GatsbyContentfulFluid_tracedSVG
        }
      }
    }
  }

in fact, if I try to use the option traceSVG inside the fluid arguments i get this error:

error  Unknown argument "traceSVG" on field "fluid" of type "ContentfulAsset"  graphql/template-strings

does someone know if there is another way to define the background and trace colors of a tracedSVG in a ContentfulAsset?

thanks for your help!

[DSchau]

@yesh could you provide a reproduction?

In general, my guess is that presuming there are images they may be associated with a localFile field as in your first example. So the query could be something like:

query projectQuery($title: String!) {
  contentfulProject(title: {
    eq: $title
  }) {
    images {
      localFile {
          fluid(
          maxWidth: 600,
          quality: 95
        ) {
          ...GatsbyContentfulFluid_tracedSVG
        }
      }
    }
  }
}

It also looks like you've forgotten to pass the traceSvg option to the image arguments, so that is almost certainly an issue. In the absence of a reproduction, it's the best I can do here.

My advice would be to check out http://localhost:8000/___graphql and validate your query there first (note: you can't use fragments, but you should be able to use src to validate the query is working as you'd expect!).

[yesh]

hi @DSchau, I don't think this is an issue or a gatsby bug, I posted this as a question/help.

the first example is something I found digging around in docs and discussion, and afaik it works.
the second one is my case, with Contentful fragments, and testing both in code and in http://localhost:8000/___graphql, adding traceSvg argument in 'fluid' (like the first example) does not work.

without the traceSvg argument it does work, and I can print trace of the image followed by the preloaded image. but I wanted to change some trace default options.

so my question is if there's a documentation for contentful fragments and how to pass the traceSvg options in this case.

thanks!

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[janczizikow]

I came across this same error today when trying to set color in tracedSVG argument.

export const pageQuery = graphql`
  query {
    us: allContentfulProduct(filter: { node_locale: { eq: "en-US" } }) {
      edges {
        node {
          id
          image {
            fluid(maxWidth: 600, tracedSVG: { color: "#673399" }) {
              ...GatsbyContentfulFluid_tracedSVG
            }
          }
        }
      }
    }
  }
`

Link to repo: https://github.com/janczizikow/contentful-svg-fragment

I'm not sure if using tracedSVG on GatsbyContentfulFluid_tracedSVG / GatsbyContentfulFixed_tracedSVG` fragments was previously supported, couldn't find anything in docs. Certainly, would be cool to be able to use it.

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[PaddyShiel89]

I'm also having the same issue. Tried installing gatsby-plugin-sharp to see if it would help but no joy.
Any idea on fixing this would be amazing.

[nandorojo]

Yeah, this problem still happens for me, too. There is no fragment for Contentful that has tracedSVG, and the traceSVG argument doesn't exist for contentful.

[dance2die]

As Google took me here, for those migrating to gatsby-plugin-image, I was able to get around with traceSVG with a new property, tracedSVGOptions.

codemon changed it to traceSVG: {color: "#FFC600" but it should be tracedSVGOptions: {color: "#FFC600"}

export const bannerImage = graphql`fragment bannerImage260 on File {
  childImageSharp {
    gatsbyImageData(
      width: 260
      tracedSVGOptions: {color: "#FFC600"}
      quality: 50
      placeholder: TRACED_SVG
      layout: CONSTRAINED
    )
  }
}