Make the Plugin Support Cloudinary Assets Sourced Via CMSs

[olavea]

We are looking to make the plugin seamlessly support Cloudinary assets sourced via CMSs and other sources.

1. Let the user configure where to find the Cloudinary data (ie. GraphQL Type) and
2. Let the user configure where on the type to find public id, cloud name, original height, original width and mime type.

Code this similarly to gatsby-remote-images: config docs link

[partik03]

@olavea I was looking to take up this one but can you explain a little bit more about the requirements of this issue?

[olavea]

Hey @partik03

The current solution lets you define types that should get the gatsbyImageData resolver added. However it requires the data on the type to conform to a very specific shape. The new solution should let the user of the plugin configure where on the type to find the data it needs. The feature might easiest be explained by how the configuration should look when done. For a Cloudinary image in Sanity the gatsby-config.js of the user should look like:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-cloudinary`,
      options: {
        // Add the `gatsbyImageData` resolver to `BlogPostHeroImage`
        transformTypes: [
          `BlogPostHeroImage`,
          {
            type: `SanityCloudinaryAsset`,
            cloudName: () => `example-cloud`, // Manually configure the cloud name by returning it from a function
            publicId: (data) => data.public_id, // Use the value of public_id from SanityCloudinaryAsset
            originalHeight: `height`, // Convenience alternative to the above by defining the path on SanityCloudinaryAsset where height can be found
            originalWidth: `width`,
            originalFormat: `format`
          }
        ],
        // Optional transformation option
        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],
      },
    },
    `gatsby-plugin-image`,
  ],
};

I apologize for the late reply.

Any follow up questions from you would be welcome 😺 👍