Gatsby Cloudinary Image Transformer

Node with Existing Data

It's possible to use existing Cloudinary assets, as opposed to uploading local files. You need to configure the GraphQL Node Type with the existing data and the data must conform to the expected data shape.

Existing Data

default sample image

Query

query {
  blogPost(title: { eq: "Blog Post Example One" }) {
    heroImage {
      gatsbyImageData(
        height: 300
        layout: FIXED
        transformations: ["e_grayscale"]
        placeholder: BLURRED
      )
    }
  }
}

BlogPost Node Shape

{
  "heroImage": {
    "cloudName": "lilly-labs-consulting",
    "publicId": "sample"
  }
}

Config

{
  "resolve": "gatsby-transformer-cloudinary",
  "options": {
    "transformTypes": [
      "BlogPostHeroImage"
    ]
  }
}

Existing Data with nested data

default sample image

Query

query {
  article(title: { eq: "Article Example One" }) {
    feature {
      image {
        gatsbyImageData(
          width: 300
          height: 300
          layout: FIXED
          transformations: ["c_fill"]
          placeholder: TRACED_SVG
        )
      }
    }
  }
}

Article Node Shape

{
  "feature": {
    "image": {
      "cloudName": "lilly-labs-consulting",
      "publicId": "sample"
    }
  }
}

Config

{
  "resolve": "gatsby-transformer-cloudinary",
  "options": {
    "transformTypes": [
      "ArticleFeatureImage"
    ]
  }
}