Gatsby Cloudinary Image Transformer

Fluid Images

In many cases, it’s desirable to make images responsive. The fluid image query is designed to expand the image to fill available space.

Fluid images loaded from Cloudinary

Marisa Morby standing in a rose garden.
query {
  image: file(name: { eq: "marisa" }) {
    cloudinary: childCloudinaryAsset {
      fluid {
        ...CloudinaryAssetFluid
      }
    }
  }
}

Apply Cloudinary transformations

Marisa Morby standing in a rose garden.
query {
  image: file(name: { eq: "marisa" }) {
    cloudinary: childCloudinaryAsset {
      fluid(
        transformations: [
          "e_grayscale",
          "e_tint:100:blue:0p:white:100p"
        ]
      ) {
        ...CloudinaryAssetFluid
      }
    }
  }
}

You can pixelate faces!

Marisa Morby standing in a rose garden.
query {
  image: file(name: { eq: "marisa" }) {
    cloudinary: childCloudinaryAsset {
      fluid(transformations: ["e_pixelate_faces"]) {
        ...CloudinaryAssetFluid
      }
    }
  }
}

Or you can get plain silly

Marisa Morby standing in a rose garden.
query {
  image: file(name: { eq: "marisa" }) {
    cloudinary: childCloudinaryAsset {
      fluid(
        transformations: ["e_blackwhite"]
        chained: [
          "e_vectorize:colors:2:despeckle:20,e_tint:100:tomato:0p:white:100p",
          "l_beard_png,w_0.77,fl_relative,g_face,a_-5,y_0.06"
        ]
      ) {
        ...CloudinaryAssetFluid
      }
    }
  }
}