Skip to main content
View plugin on GitHub
See starters using this

gatsby-plugin-cloudinary

More documentation coming soon!! This package is not well tested and is assumed to have bugs, please submit an issue or open a PR if you can fix one!

gatsby-config.js

//
plugins = [
	...plugins,
	{
		resolve: `gatsby-plugin-cloudinary`,
		options: {
			apiKey: CLOUDINARY_API_KEY,
			apiSecret: CLOUDINARY_API_SECRET,
			cloudName: CLOUDINARY_NAME,
			queryParams: {...queryParams},
		},
	},
]

Query Params

  • resource_type
  • type
  • prefix
  • public_ids
  • max_results
  • next_cursor
  • start_at
  • direction
  • tags
  • context
  • moderation

More information regarding query params: here

Graphql

Example Query including all fields

allCloudinary {
	edges {
		node {
			bytes
			children
			cloudName
			createdAt
			fixed
			fluid
			format
			height
			id
			internal
			parent
			publicId
			resourceType
			secureUrl
			type
			url
			version
			width
		}
	}
}

Gatsby Image Support

Fixed/Fluid Args

  • fixed: background, crop, format, gravity, height, quality, width
  • fluid: background, crop, format, gravicty, maxHeight, maxWidth, quality, sizes

Fragments

  • fixed: GatsbyCloudinaryFixed, GatsbyCloudinaryFixedtracedSVG, GatsbyCloudinaryFixednoBase64, GatsbyCloudinaryFixedwithWebp, GatsbyCloudinaryFixedwithWebp_noBase64
  • fluid: GatsbyCloudinaryFluid, GatsbyCloudinaryFluidtracedSVG, GatsbyCloudinaryFluidnoBase64, GatsbyCloudinaryFluidwithWebp, GatsbyCloudinaryFluidwithWebp_noBase64

Docs
Tutorials
Plugins
Blog
Showcase