Strapi and Cloudinary working with gatsby-transformer-cloudinary

[jdortegar]

Hey Guys! nice job with the plugin!

Unfortunately I can't make this works, I have a CMS with Strapi and Cloudinary as a plugin, when I try to use the gatsby-transformer-cloudinary, all the Cloudinary existing images are upload again in a cache folder, i wanna try the existing images steps but is not clear to me, could you explain to me a little more how can i do for integrate this!

Thanks in advance @jastuccio @jlengstorf

[tylerpaige]

Hi @jdortegar, I know you posted this about a year ago, but I wonder if you found any solutions. I am in the same situation.

The docs for this plugin say that it should work with images that are already uploaded to Cloudinary:

The coverPhoto property in the node above will be deleted and replaced by gatsby-transformer-cloudinary with a CloudinaryAsset node that can be used with gatsby-image. This transformation will be done for any top-level properties of nodes that have cloudinaryAssetData: true, and values cloudName, publicId, originalHeight, and originalWidth properties

Therefore, I believe the problem is that Strapi does not provide those fields to Gatsby via gatsby-source-strapi.

I guess the solution would be to somehow massage the strapi data to include these fields. But I haven't the foggiest idea how!

Any ideas from the community would be very much appreciated

[MrChrisRodriguez]

@tylerpaige @jdortegar did you ever figure this out?

Tyler - I see your issue and the corresponding PR on gatsby-source-strapi so I'm guessing you're using that instead of gatsby-source-cloudinary to get the required fields you mentioned.

If you can spare the moment, I'd be hugely appreciative if you could share a few sentences on what steps you took to get it working. Thanks

PS. Good job helping organize and spread the word about CU's tuition issues.

[tylerpaige]

@MrChrisRodriguez thanks for your kind comment. Absolutely I can share my solution. Basically, I added custom transformer plugins to create new nodes that would have the properties that gatsby-transformer-cloudinary needs:

cloudinaryAssetData
cloudName
publicId
originalHeight
originalWidth

I wish I could paste some code, but I've unfortunately lost access to that branch. The Gatsby docs do have a really good tutorial on how to create a transformer plugin though, and that's what I used to write one myself.

Basically, the procedure was like this:

• onCreateNode look for Strapi nodes
• If the node has any image properties, create a new node for the image. Copy all the original data and then add new fields (listed above)
• Create another new node to can replace the image's parent node. Copy all the original data, then add a new property for association to your newly created image node.
  • E.g. if you have a Product with an image, you would create a ParsedProduct node with a parsedImage field that points to a ParsedImage node
  • You do this because the original record will still be pointing to the un-modified Image node without the fields you want.
  • At some point, I had hoped to just use createNodeField to skip all this node creation and just modify the original Strapi Image nodes... I didn't have much luck, but maybe there's a way to get it working!

At this stage, I had no use for the gatsby-source-cloudinary plugin, as I had all the nodes I needed.

For me, though, I found that this wasn't nearly as polished as I wanted, so I decided to handle all of my image resizing in a custom component on the front-end. I read the image URL from Strapi, then construct a list of sources myself, and pass them off to gatsby-image in a format it understands. I don't think this is really the ideal outcome, but my builds are indeed a lot faster now. Here's a gist that has it all together.

At any rate, gatsby-source-strapi was still downloading all of my images for Gatsby's transformation layer, which was causing me a fair amount of bandwidth (hence my PR that you linked). That remains unsolved, but hopefully my PR can be merged soon :-)

[MrChrisRodriguez]

Thanks @tylerpaige -- I'll pass this to my team and will circle back if we make any improvements that could be helpful to you or others!

[raae]

The newest beta supports this by letting you configure the mapping of data needed.

yarn add gatsby-transformer-cloudinary@4.6.0-beta.1

Take a look at the documentation and let me know how it goes so I may improve if needed.

[raae]

@jdortegar, @MrChrisRodriguez and @tylerpaige have you been able to test the 4.6.0-beta.1? Looking to make this a current version, but would love an external test before I do.