search

bejamas / gatsby-storyblok-image

Use gatsby-image with images hosted on Storyblok CDN.
MIT License
22 stars 17 forks source link

Add support for the new gatsby-plugin-image #24

Closed Figumari closed 5 months ago

Figumari commented 3 years ago

Please add support for the new gatsby image plugin: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image#readme

arkgor commented 3 years ago

@Figumari the easiest solution would be to pass the image src directly to the gatsby-image-plugin (StaticImage) - have you tried it?

rubeonline commented 3 years ago

@arkgor I tried it and that does not work: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#restrictions-on-using-staticimage

image

fcisio commented 3 years ago

@arkgor I tried it and that does not work:

Yeah, only Dynamic images (so input from GarphQL) accept props from the parent.

But, but we're already using a lot of that between Gatsby & Storyblok. I think we could replicate what's done with Dynamic images.

But at that point, this might be worth it to create a package gatsby-storyblok-image-plugin.

saschaklatt commented 3 years ago

Is there any update on this? gatsby-image is officially deprecated.

fcisio commented 3 years ago

@klattiation Not possible, It's a limitation from Storyblok.

But they should be working on an official "Storyblok Plugin for Gatsby Image Plugin".

It should be the next thing in their roadmap

saschaklatt commented 3 years ago

@fcisio alright thanks!

lisilinhart commented 2 years ago

We added some support for gatsby images in the 3.1.0 of gatsby source storyblok: https://github.com/storyblok/gatsby-source-storyblok

fcisio commented 2 years ago

Hey everyone, following with @lisilinhart update above, I think we'd be all set for an upgrade.

I was thinking we could scratch pretty much all the current code, and simply extend the native gatsby-plugin-image components.

Basically, we only need to use the CDN url when:

  1. inside the editor if (location.search.includes('_storyblok'))
  2. no data is available from the GraphQL query, but there is a CDN url.

That way, no CDN url should make it to the prod, and we still have images that work inside the editor.

We can also get additional values (width, height, ...) when fields are integrated via the V2 Editor. So we wouldn't need to get those props by dissecting the URL anymore.

I'll be drafting this on a project, then I can help with the implementation if needed 🎉

nonjene commented 2 years ago

I am making an update to support gatsby-plugin-image, with typing support 😀

nonjene commented 2 years ago

I am making an update to support gatsby-plugin-image, with typing support 😀

https://github.com/nonjene/gatsby-plugin-storyblok-image I have rewritten it based on this plugin with typescript.