Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

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, GatsbyCloudinaryFixed_tracedSVG, GatsbyCloudinaryFixed_noBase64, GatsbyCloudinaryFixed_withWebp, GatsbyCloudinaryFixed_withWebp_noBase64
  • fluid: GatsbyCloudinaryFluid, GatsbyCloudinaryFluid_tracedSVG, GatsbyCloudinaryFluid_noBase64, GatsbyCloudinaryFluid_withWebp, GatsbyCloudinaryFluid_withWebp_noBase64
© 2024 Gatsby, Inc.