
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"
]
)
}
}
}