Gatsby Cloudinary Image Transformer

Fixed-Width Images

If your image should always be the same size no matter what the viewport size is, use a fixed image.

A fixed-width image at 300px

Jason giving finger guns toward the camera.
query {
  image: file(name: { eq: "jason" }) {
    cloudinary: childCloudinaryAsset {
      fixed(width: 300) {
        ...CloudinaryAssetFixed
      }
    }
  }
}

Add any transformations you like

Jason giving finger guns toward the camera.
query {
  image: file(name: { eq: "jason" }) {
    cloudinary: childCloudinaryAsset {
      fixed(
        width: 300, 
        transformations: ["e_grayscale"]
      ) {
        ...CloudinaryAssetFixed
      }
    }
  }
}

For complex effects, use chaining

Jason giving finger guns toward the camera.
query {
  image: file(name: { eq: "jason" }) {
    cloudinary: childCloudinaryAsset {
      fixed(
        width: 300,
        transformations: ["e_grayscale"],
        chained: ["t_lwj"]
      ) {
        ...CloudinaryAssetFixed
      }
    }
  }
}

Create avatars from any image!

Jason giving finger guns toward the camera.
query {
  image: file(name: { eq: "jason" }) {
    cloudinary: childCloudinaryAsset {
      fixed(
        width: 225,
        transformations: ["ar_1:1", "c_thumb", "g_face"]
      ) {
        ...CloudinaryAssetFixed
      }
    }
  }
}