schabibi1
commented
1 year ago @nicolekbaird Thanks for sharing your DX with us after following our Gatsby Image tutorial. I'd like to share with you this approach shared by one of our active users on Discord.
I understand your point that implementing the Gatsby Image feature into to our SDK might align with other CMSs Gatsby plugins. But when Storyblok already has a way to achieve the same goal without implementing all new Gatsby features, it might not be necessary in this case to implement.
Also, by creating a custom image component in Storyblok covers the webp & image size generation and compression through Storyblok Content Delivery API.
We have run into an issue while trying to update our site to the latest Gatsby version utilizing gatsby-source-storyblok. We would like to utilize the latest gatsby-image-plugin to serve our images from Storyblok. The documentation provided by Storyblok gives a simple use case, but in the documentation provided, it only gives the example of Querying for an image when the name of the image is known. We need to conditionally render our images based on page.
For example, our Hero Block is used across several pages and we want to conditionally render the image used in the Hero based on the page and the image uploaded for that page in Storyblok.
Our thought was that we should be able to query in storyblokEntry at the page level to source the images used on that page. While we can find the image URL within the storyblokEntry graphql query, the childImageSharp --> gatsbyImageData object needed for dynamic images in gatsby-image-plugin seems to only be available on the allFile query. If the gatsbyImageData object is only available on allFiles, we don't see a way to conditionally render images without querying all images in Storyblok using gatsby-node and matching them at the component level. This however will not work as it causes the size of context shared to be too large to even deploy on Netlify.
I am sure majority of people who use Storyblok with Gatsby need to conditionally render images. We have been sent to this plug-in as an option but it also isn't compatible with newer versions of Gatsby. Many other CMS's have already created native support for the latest Gatsby-Image-Plugin, which can be seen here in this Gatsby documentation page. We'd love for this to be a feature of gatsby-source-storyblok!