Local images uploaded to Cloudinary

These are examples of local images uploaded to Cloudinary as part of the build process.

Straight forward demo

Query

query {
  image: file(name: { eq: "sergey-semin-unsplash" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(height: 300, layout: FIXED)
    }
  }
}

Create avatars from any image

Query

query {
  image: file(name: { eq: "sergey-semin-unsplash" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(
        height: 300
        aspectRatio: 0.8
        layout: FIXED
        transformations: ["c_thumb", "g_face"]
      )
    }
  }
}

Apply Cloudinary transformations

Query

query {
  image: file(name: { eq: "joppe-spaa-unsplash" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(
        layout: CONSTRAINED
        placeholder: BLURRED
        transformations: ["e_grayscale", "e_tint:100:blue:0p:white:100p"]
      )
    }
  }
}

Or you can get plain silly

Query

query {
  image: file(name: { eq: "joppe-spaa-unsplash" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(
        layout: CONSTRAINED
        placeholder: TRACED_SVG
        transformations: ["e_blackwhite"]
        chained: [
          "e_vectorize:colors:2:despeckle:20,e_tint:100:tomato:0p:white:100p"
          "l_gatsby-cloudinary:sergey-semin-unsplash,w_0.2,g_south"
        ]
      )
    }
  }
}

For complex effects, use chaining

Query

query {
  image: file(name: { eq: "sergey-semin-unsplash" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(
        height: 300
        layout: FIXED
        transformations: ["t_gatsby-demo"]
        chained: [
          "co_rgb:FFFF00,l_text:Times_90_bold:Cool%2520text"
          "fl_layer_apply,g_south,y_20"
        ]
      )
    }
  }
}