Unable to pass all arguments to plugin-sharp

[baobabKoodaa]

I've been trying to use gatsby-remark-rehype-images to replace the "blur-up" placeholders with tracedSVG placeholders. It looks like this is not currently possible? The documentation says I should be able to "specify any arguments I wish to pass on to plugin sharp", but it seems like some of the arguments that plugin sharp supports are only possible to be expressed as GraphQL, whereas gatsby-remark-rehype-images expects me to give the arguments in JS, in gatsby-config.js.

This is my current configuration in gatsby-config.js:

{
    resolve: `gatsby-remark-rehype-images`,
    options: {
        tag: 'rehype-image',
        traceSVG: { color: "#f00e2e" },
        base64: true,
    } 
},

And here is an excerpt from plugin sharp's documentation regarding how to set tracedSVG placeholder instead of blur-up, in GraphQL syntax:

fixed(
  traceSVG: {
    color: "#f00e2e"
  }
) {
  src
  srcSet
  tracedSVG
}

I haven't been able to figure out a way to use gatsby-remark-rehype-images to pass to plugin sharp the argument "please give me tracedSVG as output".

[oorestisime]

Hm yes, i have never used the tracedSVG so I didn't know about that. it seems that it is handled differently https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/extend-node-type.js#L65

I will need some time to think how I can work around this :/

Thanks for reporting this issue.

[oorestisime]

Ok right so the problem here is that transformer-sharp used in graphql "magically" exposes the tracedSVG images. the generation is not handled by plugin-sharp (i mean the transformer calls sharp twice one for the normal picture and one for tracedsvg) this is why my plugin doesnt pick it up.

Correct solution for that would be to actually modify transformer-sharp to delegate the tracedSVG option to plugin-sharp directly. I will try and work on this soon.

Sorry this is blocking you but i am not sure i see a quick workaround here :/

[baobabKoodaa]

Thanks, I appreciate that you're looking into this!

Do you know if it should be possible for me to achieve this by augmenting the "Photo" component with a GraphQL query?

[oorestisime]

mmm i am not sure i understand how you would do that. perhaps a markup would help me understand.

[baobabKoodaa]

It looks like this is going to work out. I'll link the commit once I'm done :)

[baobabKoodaa]

Here is the commit: https://github.com/baobabKoodaa/blog/commit/2e43f4366657a775a5f41e50923e7a35b9e72bd6

[oorestisime]

oh right ok! well i will still try and fix this up properly on plugin-sharp later. it will be much cleaner!

[baobabKoodaa]

Great! My solution is a horrible amount of inefficient code just to tweak an image placeholder, so it would definitely be better if one could do this cleanly with gatsby-remark-rehype-images.

[oorestisime]

Hello again,

Gatsby just merged my PR https://github.com/gatsbyjs/gatsby/pull/11981 https://github.com/gatsbyjs/gatsby/issues/11912#event-2157949564 i think if you install latest plugin-sharp this would work directly. make sure to add generateTracedSVG: true, in your config.

please let me know how it goes so we can close this issue

[baobabKoodaa]

Hey, thanks for your efforts! It's almost working. Something else broke with that update. I made a demo here: https://temp99999.netlify.com/dont-send-your-own-email

Relevant commit: https://github.com/baobabKoodaa/blog/commit/2b5f5870d6df71bf87e5ce2056072658724ba0ac

[baobabKoodaa]

It's displaying both tracedSVG placeholder and blur-up placeholder on top of each other, for some reason. I can fix it with delete props['base64'], but it's not supposed to do this.

[oorestisime]

did you use base64: false option?

[baobabKoodaa]

I tried that now, and (assuming it's supposed to go into options) it's not working. Also it's supposed to be false by default.

options: { tag: 're-img', tracedSVG: { color: '#f9ebd2' }, generateTracedSVG: true, base64: false }

[oorestisime]

Don't have time to check it now but gatsby-image component seems to render base64 if it is there. https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L280-L288

if there is a base64 image that means that fluid and fixed always generates one and there is no option to turn it off (which kind makes sense till now). You could fix this temporary with delete in your component the time i can PR again in gatsby to add a possibility to turn this off. Hope this makes sense because i need to run afk

[baobabKoodaa]

Yeah no worries, I get it working in my thing with the delete, fix it for everyone else when you have the time. Thanks again!

[oorestisime]

and yes it seems sharp is always generating base64 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/src/index.js#L687-L699

got to go now but this needs to be fixed in gatsby-plugin-sharp. probably get it to it soon! Thanks for reporting all these! it helps improve both gatsby and the plugin :)

[oorestisime]

Hello again,

PR was merged in gatsby-plugin-sharp so with the next release (usually within the day) the base64: false should be respected. let me know if you notice any other bugs.

[baobabKoodaa]

let me know if you notice any other bugs.

Well, now that you mention it, Gatsby is generating the same image into multiple paths, causing unnecessary downloads: https://github.com/gatsbyjs/gatsby/issues/12080

It's related to your plugin, but I believe a proper fix would be related to asset path generation in general.

[oorestisime]

@baobabKoodaa PR got merged. would you be able to test this as soon as sharp gets a new release?

[baobabKoodaa]

Yes, if you ping me.

[oorestisime]

• gatsby-plugin-sharp@2.0.32 :)

[baobabKoodaa]

I'm still having this issue with gatsby-plugin-sharp@2.0.32.

Steps to reproduce:

1. Checkout branch temp384 of this repo
2. npm i gatsby-plugin-sharp@2.0.32
3. Create .env file with content POSTS_FOLDER=posts
4. Clear cache and public, build and serve
5. Open the page in browser with network tools on, copy the path of the loaded mailbox image
6. Click the mailbox image to get to a different page with the same mailbox image. Again, copy the path of the loaded image in devtools.
7. Compare the paths for the images and notice how they are different.