Relevant Gatsby Docs

• https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options

They don't appear to be, and that seems valuable for sorting the images.

There's a typo supposed to be yarn instead of "yarm".

Installation

Install the source plugin using either npm or yarm: 👈

gatsby build results in:

11:42:15 PM: error Error in "/opt/build/repo/node_modules/gatsby-source-cloudinary/gatsby-node": Cannot find module '../package.json'
11:42:15 PM: Require stack:
11:42:15 PM: - /opt/build/repo/node_modules/gatsby-source-cloudinary/utils.js
11:42:15 PM: - /opt/build/repo/node_modules/gatsby-source-cloudinary/gatsby-node.js
11:42:15 PM: 
11:42:15 PM: 
11:42:15 PM:   Error: Cannot find module '../package.json'
11:42:15 PM:   Require stack:
11:42:15 PM:   - /opt/build/repo/node_modules/gatsby-source-cloudinary/utils.js
11:42:15 PM:   - /opt/build/repo/node_modules/gatsby-source-cloudinary/gatsby-node.js
11:42:15 PM:   
11:42:15 PM:   - loader:1075 Function.Module._resolveFilename
11:42:15 PM:     node:internal/modules/cjs/loader:1075:15
11:42:15 PM:   
11:42:15 PM:   - loader:920 Function.Module._load
11:42:15 PM:     node:internal/modules/cjs/loader:920:27
11:42:15 PM:   
11:42:15 PM:   - loader:1141 Module.require
11:42:15 PM:     node:internal/modules/cjs/loader:1141:19
11:42:15 PM:   
11:42:15 PM:   - helpers:110 require
11:42:15 PM:     node:internal/modules/cjs/helpers:110:18
11:42:15 PM:   
11:42:15 PM:   - utils.js:4 Object.<anonymous>
11:42:15 PM:     [repo]/[gatsby-source-cloudinary]/utils.js:4:19
11:42:15 PM:   
11:42:15 PM:   - loader:1254 Module._compile
11:42:15 PM:     node:internal/modules/cjs/loader:1254:14
11:42:15 PM:   
11:42:15 PM:   - loader:1308 Object.Module._extensions..js
11:42:15 PM:     node:internal/modules/cjs/loader:1308:10
11:42:15 PM:   
11:42:15 PM:   - loader:1117 Module.load
11:42:15 PM:     node:internal/modules/cjs/loader:1117:32
11:42:15 PM:   
11:42:15 PM:   - loader:958 Function.Module._load
11:42:15 PM:     node:internal/modules/cjs/loader:958:12
11:42:15 PM:   
11:42:15 PM:   - loader:1141 Module.require
11:42:15 PM:     node:internal/modules/cjs/loader:1141:19
11:42:15 PM:   
11:42:15 PM:   - helpers:110 require
11:42:15 PM:     node:internal/modules/cjs/helpers:110:18
11:42:15 PM:   
11:42:15 PM:   - gatsby-node.js:5 Object.<anonymous>
11:42:15 PM:     [repo]/[gatsby-source-cloudinary]/gatsby-node.js:5:5
11:42:15 PM:   
11:42:15 PM:   - loader:1254 Module._compile
11:42:15 PM:     node:internal/modules/cjs/loader:1254:14
11:42:15 PM:   
11:42:15 PM:   - loader:1308 Object.Module._extensions..js
11:42:15 PM:     node:internal/modules/cjs/loader:1308:10
11:42:15 PM:   
11:42:15 PM:   - loader:1117 Module.load
11:42:15 PM:     node:internal/modules/cjs/loader:1117:32
11:42:15 PM:   
11:42:15 PM:   - loader:958 Function.Module._load
11:42:15 PM:     node:internal/modules/cjs/loader:958:12
11:42:15 PM:   
11:42:15 PM: 
11:42:15 PM: not finished load plugins - 0.325s
11:42:15 PM: ​
11:42:15 PM: "build.command" failed                                        
11:42:15 PM: 

Looking at the compiled code at node_modules/gatsby-source-cloudinary/utils.js shows the following at line 4:

const pluginPkg = require('../package.json');

Correcting the path to ./package.json resolves the issue.

Hello,
I try to create images gallery in my gatsby project. I decided to use cloudinary, however it do not want to work. I used Static Query the component. I uploaded photos on the Cloudinary
How can I fix it?

Steps to reproduce

Follow instructions from https://scotch.io/tutorials/handling-images-in-gatsby-with-high-performance

• Install gatsby-source-cloudinary
• Setup your environments
• Run local server

Expected result
My local server will run and I will see images from cloudinary on my page.

Actual result

I get errors:

• The gatsby-source-cloudinary plugin has generated no Gatsby nodes. Do you need it?
• Cannot query field "allCloudinaryMedia" on type "Query".

I'm aware of the similar gatsby-transformer-cloudinary package, which seems to do the opposite(upload images to cloudinary for transform and use URLs from cloudinary in production). I would like to process images locally at build via sharp, with images remotely retrieved from cloudinary.

The contentful source plugin is capable of this, it has an option to expose a localFile node in graphql that sharp transformer can operate on. In the examples for this cloudinary source plugin, I get the impression this is not possible?

The docs are not entirely clear, but is this not doing any download of Cloudinary images for deploying with a build either, and just providing an image URL to cloudinary? If the remote content is retrieved at build for deploying images as local files with the rest of the build, then being able to leverage sharp at build time for gatsby-image would be a nice feature.

I'm very excited about this plugin!
In the docs, we have:

• allCloudinaryMedia to query all images (with a default limit of 10 btw)

• cloudinaryMedia to fetch one image.

If I'm correct, then what if I need to query love heart.svg and logo.jpg in a single query???

Can something like that be achieved?

Fictitious example (code below doesn't work on graphql)

 const data = useStaticQuery(graphql`
        query CloudinaryImage {
            cloudinaryMedia(public_id: {eq: "cloudinary/love_heart" AND SOMETHING ELSE??????}) {
                secure_url
              }
          }
          `
    );

The only thing I get back on a node is the secure_url

Gatsby config

    {
      resolve: `gatsby-source-cloudinary`,
      options: {
        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
        resourceType: `image`,
        prefix: `my-cloudinary-folder/`,
        tags: true,
      },
    },
    ...
  ],

Make the Contributing.md hacktoberfest ready

🔲 Fix internal links to headings
🔲 Clean up language

I keep getting this error when I run gatsby build. I've added my cloudName and credentials per the installation instructions and using dotenv. Any ideas how to get rid of the error message?

ERROR #11321 PLUGIN

"gatsby-source-cloudinary" threw an error while running the sourceNodes lifecycle:

Must supply cloud_name

This plugin is missing unit tests

The example in README.md should show how to define an environment config file, .env.development and/or .env.production, Those files are never commited.

And in gatsby-config.js use the environment variables defined in there instead of exposing the values.

Is it possible through the existing plugin to retrieve alt text specified in Cloudinary? Using GraphiQL, I did not see anything that resembled this data.

Thanks in advance!

Similar to https://github.com/queen-raae/gatsby-plugin-starter

Hi
Is there a way to source image sizes based on the viewpoint size?
The demo site and from the investigation I have been doing, the largest image size is downloaded.

Can see via gatsby-transformer-cloudinary this is possible but the images need to be uploaded via the default Gatsby interface to create the File nodes, which does not seem to allow for bulk upload and is why I was hoping to use Cloudinary for handling images.

Any thoughts on this would be great, thinking I am missing something.

Gavin

we need to be able to pass in a custom cname into the config:

https://github.com/cloudinary-devs/gatsby-source-cloudinary/blob/3695b8afb8214f8e966a55f1ea0b233c14ac3476/plugin/utils.js#L23

you may already know this, so bear with me if im repeating what you know, but this appears to be configured via pluginOptions:

https://github.com/cloudinary-devs/gatsby-source-cloudinary/blob/3695b8afb8214f8e966a55f1ea0b233c14ac3476/plugin/gatsby-node.js#L115

so i believe we need to make it available via the schema:

https://github.com/cloudinary-devs/gatsby-source-cloudinary/blob/3695b8afb8214f8e966a55f1ea0b233c14ac3476/plugin/gatsby-node.js#L10

in order for someone to be able to use this and pass it in

Hello, am I having an issue running an app when gatsby-source-cloudinary ins installed:

 Error: Cannot find module '../package.json'
  Require stack:
  - /home/chris/development/app/app-static/node_modules/gatsby-source-cloudinary/utils.js
  - /home/chris/development/app/app-static/node_modules/gatsby-source-cloudinary/gatsby-node.js
  
  - loader:1075 Function.Module._resolveFilename
    node:internal/modules/cjs/loader:1075:15
  
  - loader:920 Function.Module._load
    node:internal/modules/cjs/loader:920:27
  
  - loader:1141 Module.require
    node:internal/modules/cjs/loader:1141:19
  
  - helpers:110 require
    node:internal/modules/cjs/helpers:110:18
  
  - utils.js:4 Object.<anonymous>
    [app-static]/[gatsby-source-cloudinary]/utils.js:4:19
  
  - loader:1254 Module._compile
    node:internal/modules/cjs/loader:1254:14
  
  - loader:1308 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1308:10
  
  - loader:1117 Module.load
    node:internal/modules/cjs/loader:1117:32
  
  - loader:958 Function.Module._load
    node:internal/modules/cjs/loader:958:12
  
  - loader:1141 Module.require
    node:internal/modules/cjs/loader:1141:19
  
  - helpers:110 require
    node:internal/modules/cjs/helpers:110:18
  
  - gatsby-node.js:5 Object.<anonymous>
    [app-static]/[gatsby-source-cloudinary]/gatsby-node.js:5:5
  
  - loader:1254 Module._compile
    node:internal/modules/cjs/loader:1254:14
  
  - loader:1308 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1308:10
  
  - loader:1117 Module.load
    node:internal/modules/cjs/loader:1117:32
  
  - loader:958 Function.Module._load
    node:internal/modules/cjs/loader:958:12
  

not finished load plugins - 0.644s

error Command failed with exit code 1.

Config is:

{
      resolve: `gatsby-source-cloudinary`,
      options: {
        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
        resourceType: `image`,
        // type: `twitter`,
        // maxResults: 22,
        // tags: true,
        // context: true,
        // prefix: `demo/animals`
      },
    },

ENV variables are defined

This is documented, but it seems like support for repositories with over 500 files should be possible.

If no one else solves this by the time I encounter this issue I will happily submit the PR.

👋 Hi! This looks like a great plugin -- was just thinking about use cases and it doesn't seem appropriate for a markdown blog given that the images are sourced via a graphql query and the blog would not have access to that (unless it's written in MDX?).

Cheers!

Under the Contributing section link to CONTRIBUTING.md

Sorry but it is not quite clear how to use this plug-in.
Ok, the configuration part, but after that?

Is support for gatsby-plugin-image planned?

Reorganize the repo into a yarn workspace together with a demo.

Is there a way to retrieve custom image metadata from Cloudinary images?

This would be beneficial if users programmatically add metadata key/value pairs to media uploads.

To give the ability to track Gatsby usage in addition to or separate from the standard JS usage, we'd like to add a custom Analytics ID

The Analytics token is appended at the end of Cloudinary URLs as a query parameter by the SDKs, giving us the ability to have insights as to what SDKs or tools are making Cloudinary requests.

The relevant code depends on the SDK being used, but the Cloudinary URL Gen SDK would be added similar to this work from Next Cloudinary:

https://github.com/colbyfayock/next-cloudinary/blob/ab7ba447af6eff264d9baf984ca513b5910a316e/next-cloudinary/src/lib/cloudinary.ts#L101

To implement, set the real versions including:

• sdkCode: X (this is the Gatsby specific code)
• sdkVersion: the current version of this Gatsby plugin (ideally dynamically added)
• techVersion: the current Gatsby version being used (ideally dynamically added)

Should restructure the folders and add en example gatsby site like it's done in
https://github.com/cloudinary-devs/gatsby-transformer-cloudinary

Correct me if I'm wrong, but it seems like the way to source both image and video resourceType's, is to include the gatsby-source-cloudinary plugin twice in gatsby-config.js. Is this the recommended approach?

Example:

module.exports = {
  plugins: [
    ...
    {
      resolve: `gatsby-source-cloudinary`,
      options: {
        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
        resourceType: "image",
      },
    },
    {
      resolve: `gatsby-source-cloudinary`,
      options: {
        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
        resourceType: "video",
      },
    },
    ...
  ]
};

I tried an array ["image", "video"] but resourceType must be a string. Also tried "image,video" but that didn't seem to work.

I feel like it would be nice to call out the recommended way to do this in the docs somewhere (whether that is what I've done or another way). I find it kind of surprising the Gatsby config allows duplicate plugins like this; I tried this as a kind of last-ditch effort and it worked, so some explicit guidance would be super helpful.