gatsby-source-wordpress using featuredImage gatsbyImage with tracedSVGOptions (and migrate to Gatsby Image CDN…)

[violy]

I'm try to use gatsby-image with tracedSVGOptions and gatsby-source-wordpress.

According to my GraphQL exemple query below, the featureImage.node.gatsbyImage query fails when I'm using tracedSVGOptions. My current workaround is to use featureImage.node.localFile.childImageSharp.gatsbyImageData !

But I'm trying to migrate to Gatsby Image CDN … and localFile is null …
→ because plugin configuration is MediaItem: {createFileNodes: false,},

Why tracedSVGOptions option and others Gatsby Image sharp options is not simply exposed by gatsby-source-wordpress plugin in GraphQL ?

unsupported feature	gatsby-image-plugin description
transformOptions	Options to pass to sharp to control cropping and other image manipulations.
tracedSVGOptions	Options for traced placeholder SVGs. See potrace options. Ignored unless placeholder is traced SVG.
jpgOptions	Options to pass to sharp when generating JPG images.
pngOptions	Options to pass to sharp when generating PNG images.
webpOptions	Options to pass to sharp when generating WebP images.
avifOptions	Options to pass to sharp when generating AVIF images.

Sample GraphQL query :

{
    wpPage(slug: {eq: "sample-page"}) {
        slug
        title
        featuredImage {
            node {
                gatsbyImage(
                    width: 1920
                    height: 1920
                    placeholder: TRACED_SVG
                    layout: FULL_WIDTH
                    # with tracedSVGOptions query fails
                    tracedSVGOptions: {background: "#666666", color: "#F0F0F0", turdSize: 4, optTolerance: 0.5, turnPolicy: TURNPOLICY_WHITE, blackOnWhite: false}
                )
                localFile {
                    childImageSharp {
                        gatsbyImageData(
                            width: 1920
                            height: 1920
                            placeholder: TRACED_SVG
                            layout: FULL_WIDTH
                            # tracedSVGOptions works … only if MediaItem createFileNodes
                            tracedSVGOptions: {background: "#666666", color: "#F0F0F0", turdSize: 4, optTolerance: 0.5, turnPolicy: TURNPOLICY_WHITE, blackOnWhite: false}
                        )
                    }
                }
            }
        }
    }
}

Is there a workaround ?

Thanks.

[laurenskling]

Isn't SVG just not supported in ImageCDN? https://support.gatsbyjs.com/hc/en-us/articles/4426393233171-How-to-Enable-Image-CDN

[violy]

Thank you for your quick answer ! I'm using Netlify on the current project.
Is this not-yet-implementation of TRACED_SVG only for Gatsby Cloud ? is it on the road-map ?

And what about all others options listed in my unsupported feature table, not related directly to TRACED_SVG !

[laurenskling]

I'm just another user, I don't know what is on the road map.

Can you even do ImageCDN on Netlify? Isn't is a Gatsby Cloud feature?

The rest might be unsupported because I think the syntax changed a bit. Something makes me think that. You could just debug in the GraphiQL what you are able to query, right?

[violy]

Yes, I'm trying to use ImageCDN on Netlify — according to this article. but it seems quite difficult, the related demo repo don't work anymore.

[violy]

and yes, I see none of the previously mentioned unsupported features, locally in GraphiQL.

[TylerBarnes]

Hi @violy, TRACED_SVG is supported on the latest Gatsby 4 versions of plugins, as well as on the latest Gatsby 5 versions. As far as passing options to potrace, that hasn't been implemented yet but would need to be added here https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-utils/src/polyfill-remote-file/placeholder-handler.ts#L128-L133. We don't currently have that on our roadmap but I definitely recommend requesting it here https://gatsby.canny.io/gatsby-cloud. I would also review a PR adding it if you're interested in doing that.

The other options don't make sense in the context of Image CDN because Image CDN only uses sharp for placeholders, all other image processing is done through the Image CDN server without the use of sharp. The only available options are what's currently in the schema: