Rewrite README to explain how to add Gatsby image support to Cloudinary image data sourced from Sanity CMS

[olavea]

As stated in issue #214, gatsby-transformer-cloudinary does not work with the Sanity Cloudinary Plugin. Not out of the box.

So the README needs a new main headin called "Add Gatsby Image Support to Cloudinary image data sourced from a CMS"

Sanity creates nodes with fields of type SanityCloudinaryAsset when you pick an image from Cloudinary. Unfortunately it does not have the shape require by gatsby-transformer-cloudinary.

To get around that you may create nodes with the correct shape.

Let say we have the Gatsby node of type SanityArticle with a field cover of type SanityCloudinaryAsset

// File: gatsby-node.js

exports.onCreateNode = async (gatsbyUtils) => {
  const { node, actions, createNodeId, createContentDigest } = gatsbyUtils
  const { createNode } = actions

  if (node.internal.type === "SanityArticle") {
    // Create the correct data shape
    const cloudinaryAssetData = {
      cloudName: "cloud-name", // use your cloudName
      publicId: node.cover.public_id,
      originalHeight: node.cover.height,
      originalWidth: node.cover.width,
      originalFormat: node.cover.format,
    }

    // Create a Gatsby node with the correct data shape
    createNode({
      ...cloudinaryAssetData,
      id: createNodeId(`SanityCloudinaryAsset >>> ${node.cover.public_id}`),
      parent: node.id,
      internal: {
        type: "CloudinaryAsset", // or another type, remember to define `transformTypes` if you use another type
        contentDigest: createContentDigest(cloudinaryAssetData),
      },
    })
  }
}

exports.createSchemaCustomization = async ({ actions }) => {
  // Update the schema to add a link to the node with the correct shape
  actions.createTypes(/* GraphQL */ `
    type SanityArticle implements Node {
      coverImage: CloudinaryAsset
        @link(by: "publicId", from: "cover.public_id")
    }
 `)
}

You may now query for the gatsbyImageData on coverImage:

allSanityHomepageHero {
    nodes {
      coverImage {
        gatsbyImageData(height: 300)
      }
    }
}

[HeetVekariya]

@olavea I can work on this issue, can you please provide me some links (for the info which is to be added in the README.md) where can i refer to.

[AminPainter]

This is the same code but for Contentful. (I have a gallery record that contains many images.)

gatsby-node.js

exports.onCreateNode = async gatsbyUtils => {
  const { node, actions, createNodeId, createContentDigest } = gatsbyUtils;
  const { createNode } = actions;

  if (node.internal.type !== 'contentfulGalleryImagesJsonNode') return;

  // Create the correct data shape
  const cloudinaryAssetData = {
    cloudName: 'your-cloud-name',
    publicId: node.public_id,
    originalHeight: node.height,
    originalWidth: node.width,
    originalFormat: node.format,
  };

  // Create a Gatsby node with the correct data shape
  createNode({
    ...cloudinaryAssetData,
    id: createNodeId(`contentfulGalleryImagesJsonNode >>> ${node.public_id}`),
    parent: node.id,
    internal: {
      type: 'CloudinaryAsset',
      contentDigest: createContentDigest(cloudinaryAssetData),
    },
  });
};

exports.createSchemaCustomization = async ({ actions }) => {
  // Update the schema to add a link to the node with the correct shape
  actions.createTypes(`
    type contentfulGalleryImagesJsonNode implements Node {
      cloudinaryImage: CloudinaryAsset @link(by: "publicId", from: "public_id")
    }
  `);
};

gatsby-config.js

{
      resolve: 'gatsby-transformer-cloudinary',
      options: {
        transformTypes: ['CloudinaryAsset'],
      },
},

Sample query

query MyQuery {
  allContentfulGallery {
    nodes {
      title
      images {
        cloudinaryImage {
          gatsbyImageData
          cloudName
          id
          originalWidth
          originalHeight
          originalFormat
        }
      }
    }
  }
}