Gatsby source plugin to fetch files from Cloudinary into Gatsby.
npm install gatsby-source-cloudinaryPull data from your Cloudinary account into the Gatsby data layer with gatsby-source-cloudinary:
- 📥 Creates a CloudinaryMedia node for each media file found based on your configuration.
Use together with gatsby-transformer-cloudinary to:
- 🖼️ Add gatsby-plugin-image support to the sourced CloudinaryMedia nodes.
- 📤 Upload local images and remote images to Cloudinary from within your Gatsby project.
This is a community library supported by the Cloudinary Developer Experience team.
- 🚀 Getting Started
- Install Package
- Configure Plugin
- Example usage
- 🖼️ Use with Gatsby Image
- Install Packages
- Configure Plugins
- Example usage
- 🔌 Pugin Options
- ⚠️ Gotchas
- 📚 Other Resources
- 🏴☠️ Contribute
``bash`
npm install gatsby-source-cloudinary
or
`bash`
yarn add gatsby-source-cloudinary
Add gatsby-source-cloudinary to the plugin array in your gatsby-config.js file.
`jsgatsby-source-cloudinary
module.exports = {
plugins: [
{
resolve: ,image
options: {
cloudName: process.env.CLOUDINARY_CLOUD_NAME,
apiKey: process.env.CLOUDINARY_API_KEY,
apiSecret: process.env.CLOUDINARY_API_SECRET,
// resourceType: ,twitter
// type: ,demo/animals
// maxResults: 22,
// tags: true,
// context: true,
// prefix: `
},
},
],
};
process.env ⁉️ Read about env variables in the Gatsby docs.
`jsx
import React from 'react';
import { graphql } from 'gatsby';
export default function BasicPage({ data }) {
return (
{data.allCloudinaryMedia.nodes.map((media, index) => (
))}
);
}
export const query = graphql
query {
allCloudinaryMedia {
nodes {
secure_url # https version of the url
# url - http version of the url
}
}
};`
To add support for gatsby-plugin-image you'll need the gatsby-transformer-cloudinary plugin.
`bash`
npm install gatsby-transformer-cloudinary gatsby-plugin-image
or
`bash`
yarn add gatsby-transformer-cloudinary gatsby-plugin-image
`js
// File: ./gatsby-config.js
module.exports = {
plugins: [
{
resolve: gatsby-source-cloudinary,image
options: {
cloudName: process.env.CLOUDINARY_CLOUD_NAME,
apiKey: process.env.CLOUDINARY_API_KEY,
apiSecret: process.env.CLOUDINARY_API_SECRET,
// resourceType: ,twitter
// type: ,demo/animals
// maxResults: 22,
// tags: true,
// context: true,
// prefix: gatsby-transformer-cloudinary
},
},
{
resolve: ,gatsbyImageData
options: {
// Add the resolver to CloudinaryMediaCloudinaryMedia
transformTypes: [],gatsby-plugin-image
},
},
,`
],
};
Check the gatsby-plugin-image docs and gatsby-transformer-cloudinary docs to learn more.
`jsx
// File: ./pages/images.js
import React from 'react';
import { graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
export default function GasbyImagePage({ data }) {
return (
{data.allCloudinaryMedia.nodes.map((media, index) => {
const image = getImage(media);
return
})}
);
}
export const query = graphql
query {
allCloudinaryMedia {
nodes {
gatsbyImageData(width: 300, placeholder: BLURRED)
}
}
};`
You'll find your Cloudinary account's cloudName in your Cloudinary console.
Type: String\
Default: n/a\
Note: Store and retrieve your cloudName as an environment variable.
The API Key of your Cloudinary account. You'll find it in your Cloudinary console.
Type: String\
Default: n/a\
Note: Store and retrieve your apiKey as an environment variable.
The API Secret of your Cloudinary account. You'll find it in your Cloudinary console.
Type: String\
Default: n/a\
Note: Store and retrieve your apiSecret as an environment variable.
The _resource_ types to include when pulling data from Cloudinary.
Type: String\
Default: image\image
Valid: , raw and video\resourceType
Note: Use the video for all video and audio files, such as .mp3 and .mp4.
The _storage_ types to include when pulling data from your Cloudinary account.
Type: String\
Default: n/a\
Valid: upload, private, authenticated, facebook, twitter, gplus, instagram_name, gravatar, youtube, hulu, vimeo, animoto, worldstarhiphop and dailymotion\
Note: When not given, all types are sourced.
Max number of resources to return.
Type: Integer\
Default: 10
When true, includes the list of tag names assigned to each resource.
Type: Boolean\
Default: false
Find all resources with a public ID that starts with the given prefix sorted by public ID in the response.
Type: String\
Default: n/a\
Note: Can be used to source only media files from a specific folder. However, you will need to specify both type and resourceType in the config options.
When true, includes the context data assigned to each resource. Helpful in retrieving alt text or custom metadata configured for the media file in Cloudinary.
Type: Boolean\
Default: n/a
The custom domain name (CNAME) to use for building secure URLs (https).
Relevant only for users on the Advanced plan or higher that have a custom CNAME. For details, see Private CDNs and CNAMEs.
Type: String\
Default: n/a
The custom domain name (CNAME) to use for building non-secure URLs (http).
Relevant only for users on the Advanced plan or higher that have a custom CNAME. For details, see Private CDNs and CNAMEs.
Type: String\
Default: n/a
Relevant only for users on the Advanced plan or higher that have private CDN distribution. For details, see Private CDNs and CNAMEs.
Type: Boolean\
Default: false
- Gatsby pulls the data from Cloudinary when it builds; you need to trigger a rebuild whenever new media files are added to the Cloudinary account.
- f_auto and q_auto Cloudinary transformations are applied automatically to the secure_url and url value optimizing the delivered media quality and format.gatsby-transformer-cloudinary` the secureDistribution, cname and privateCdn options do not carry over, and there is no way to set them in that plugin.
- If you use this plugin together with
- Cloudinary image transformation reference
You may improve the documentation, help fellow users, report bugs, suggest enhancements, contribute code and more.
Get started by reading the contribution docs.