{"id":16039561,"url":"https://github.com/cloudinary-community/gatsby-source-cloudinary","last_synced_at":"2025-03-29T03:31:16.382Z","repository":{"id":37425671,"uuid":"151869808","full_name":"cloudinary-community/gatsby-source-cloudinary","owner":"cloudinary-community","description":"Source media from your Cloudinary account 📥 🖼","archived":false,"fork":false,"pushed_at":"2024-04-05T17:24:20.000Z","size":627,"stargazers_count":28,"open_issues_count":14,"forks_count":18,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-04-14T03:39:35.034Z","etag":null,"topics":["gatsby","gatsby-plugin","gatsbyjs","hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudinary-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-06T18:29:19.000Z","updated_at":"2024-06-05T14:46:35.122Z","dependencies_parsed_at":"2023-02-18T18:15:40.227Z","dependency_job_id":"c3360aa3-dac6-4604-8789-95ef888189af","html_url":"https://github.com/cloudinary-community/gatsby-source-cloudinary","commit_stats":{"total_commits":76,"total_committers":10,"mean_commits":7.6,"dds":0.6842105263157895,"last_synced_commit":"f95cc21499fcd0c579a2217048ce8f74e49446c2"},"previous_names":["cloudinary-devs/gatsby-source-cloudinary"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-source-cloudinary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-source-cloudinary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-source-cloudinary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-source-cloudinary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudinary-community","download_url":"https://codeload.github.com/cloudinary-community/gatsby-source-cloudinary/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246135699,"owners_count":20729055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-plugin","gatsbyjs","hacktoberfest"],"created_at":"2024-10-08T23:05:32.528Z","updated_at":"2025-03-29T03:31:16.084Z","avatar_url":"https://github.com/cloudinary-community.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gatsby Source Cloudinary\n\nPull data from your Cloudinary account into the Gatsby data layer with `gatsby-source-cloudinary`:\n\n- 📥 Creates a `CloudinaryMedia` node for each media file found based on your configuration.\n\nUse together with [`gatsby-transformer-cloudinary`](https://www.gatsbyjs.com/plugins/gatsby-transformer-cloudinary/) to:\n\n- 🖼️ Add [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) support to the sourced `CloudinaryMedia` nodes.\n- 📤 Upload local images and remote images to [Cloudinary](https://cloudinary.com/) from within your Gatsby project.\n\n**This is a community library supported by the Cloudinary Developer Experience team.**\n\n## 📖 Table of Contents\n\n- [🚀 Getting Started](#🚀-getting-started)\n  - [Install Package](#install-package)\n  - [Configure Plugin](#configure-plugin)\n  - [Example usage](#example-usage)\n- [🖼️ Use with Gatsby Image](#🖼️-use-with-gatsby-plugin-image)\n  - [Install Packages](#install-packages)\n  - [Configure Plugins](#configure-plugins)\n  - [Example usage](#example-usage)\n- [🔌 Pugin Options](#🔌-plugin-options)\n- [⚠️ Gotchas](#⚠️-gotchas)\n- [📚 Other Resources](#📚-other-resources)\n- [🏴‍☠️ Contribute](#🏴‍☠️-contribute)\n\n\u0026nbsp;\n\n## 🚀 Getting Started\n\n### Install Package\n\n```bash\nnpm install gatsby-source-cloudinary\n```\n\nor\n\n```bash\nyarn add gatsby-source-cloudinary\n```\n\n### Configure Plugin\n\nAdd `gatsby-source-cloudinary` to the plugin array in your `gatsby-config.js` file.\n\n```js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-cloudinary`,\n      options: {\n        cloudName: process.env.CLOUDINARY_CLOUD_NAME,\n        apiKey: process.env.CLOUDINARY_API_KEY,\n        apiSecret: process.env.CLOUDINARY_API_SECRET,\n        // resourceType: `image`,\n        // type: `twitter`,\n        // maxResults: 22,\n        // tags: true,\n        // context: true,\n        // prefix: `demo/animals`\n      },\n    },\n  ],\n};\n```\n\n`process.env` ⁉️ Read about [env variables in the Gatsby docs](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/).\n\n### Example usage\n\n```jsx\nimport React from 'react';\nimport { graphql } from 'gatsby';\n\nexport default function BasicPage({ data }) {\n  return (\n    \u003cmain\u003e\n      {data.allCloudinaryMedia.nodes.map((media, index) =\u003e (\n        \u003cimg key={index} width=\"200px\" src={media.secure_url} /\u003e\n      ))}\n    \u003c/main\u003e\n  );\n}\n\nexport const query = graphql`\n  query {\n    allCloudinaryMedia {\n      nodes {\n        secure_url # https version of the url\n        # url - http version of the url\n      }\n    }\n  }\n`;\n```\n\n\u0026nbsp;\n\n## 🖼️ Use with Gatsby Plugin Image\n\nTo add support for [`gatsby-plugin-image`](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) you'll need the [`gatsby-transformer-cloudinary`](https://www.gatsbyjs.com/plugins/gatsby-transformer-cloudinary/) plugin.\n\n### Install Packages\n\n```bash\nnpm install gatsby-transformer-cloudinary gatsby-plugin-image\n```\n\nor\n\n```bash\nyarn add gatsby-transformer-cloudinary gatsby-plugin-image\n```\n\n### Configure Plugins\n\n```js\n// File: ./gatsby-config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-cloudinary`,\n      options: {\n        cloudName: process.env.CLOUDINARY_CLOUD_NAME,\n        apiKey: process.env.CLOUDINARY_API_KEY,\n        apiSecret: process.env.CLOUDINARY_API_SECRET,\n        // resourceType: `image`,\n        // type: `twitter`,\n        // maxResults: 22,\n        // tags: true,\n        // context: true,\n        // prefix: `demo/animals`\n      },\n    },\n    {\n      resolve: `gatsby-transformer-cloudinary`,\n      options: {\n        // Add the `gatsbyImageData` resolver to `CloudinaryMedia`\n        transformTypes: [`CloudinaryMedia`],\n      },\n    },\n    `gatsby-plugin-image`,\n  ],\n};\n```\n\nCheck the [`gatsby-plugin-image` docs](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) and [`gatsby-transformer-cloudinary` docs](https://www.gatsbyjs.com/plugins/gatsby-transformer-cloudinary/) to learn more.\n\n### Example usage\n\n```jsx\n// File: ./pages/images.js\n\nimport React from 'react';\nimport { graphql } from 'gatsby';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\nexport default function GasbyImagePage({ data }) {\n  return (\n    \u003cmain\u003e\n      {data.allCloudinaryMedia.nodes.map((media, index) =\u003e {\n        const image = getImage(media);\n        return \u003cGatsbyImage key={index} image={image} /\u003e;\n      })}\n    \u003c/main\u003e\n  );\n}\n\nexport const query = graphql`\n  query {\n    allCloudinaryMedia {\n      nodes {\n        gatsbyImageData(width: 300, placeholder: BLURRED)\n      }\n    }\n  }\n`;\n```\n\n\u0026nbsp;\n\n## 🔌 Plugin Options\n\n### `cloudName` (required)\n\nYou'll find your Cloudinary account's `cloudName` in your [Cloudinary console](https://cloudinary.com/console/).\n\n**Type:** String\\\n**Default:** n/a\\\n**Note:** Store and retrieve your `cloudName` as [an environment variable](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/).\n\n### `apiKey` (required)\n\nThe API Key of your Cloudinary account. You'll find it in your [Cloudinary console](https://cloudinary.com/console/).\n\n**Type:** String\\\n**Default:** n/a\\\n**Note:** Store and retrieve your `apiKey` as [an environment variable](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/).\n\n### `apiSecret` (required)\n\nThe API Secret of your Cloudinary account. You'll find it in your [Cloudinary console](https://cloudinary.com/console/).\n\n**Type:** String\\\n**Default:** n/a\\\n**Note:** Store and retrieve your `apiSecret` as [an environment variable](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/).\n\n### `resourceType`\n\nThe _resource_ types to include when pulling data from Cloudinary.\n\n**Type:** String\\\n**Default:** `image`\\\n**Valid:** `image`, `raw` and `video`\\\n**Note:** Use the video `resourceType` for all video and audio files, such as `.mp3` and `.mp4`.\n\n### `type`\n\nThe _storage_ types to include when pulling data from your Cloudinary account.\n\n**Type:** String\\\n**Default:** n/a\\\n**Valid:** `upload`, `private`, `authenticated`, `facebook`, `twitter`, `gplus`, `instagram_name`, `gravatar`, `youtube`, `hulu`, `vimeo`, `animoto`, `worldstarhiphop` and `dailymotion`\\\n**Note:** When not given, all types are sourced.\n\n### `maxResults`\n\nMax number of resources to return.\n\n**Type:** Integer\\\n**Default:** `10`\n\n### `tags`\n\nWhen `true`, includes the list of tag names assigned to each resource.\n\n**Type:** Boolean\\\n**Default:** `false`\n\n### `prefix`\n\nFind all resources with a public ID that starts with the given `prefix` sorted by public ID in the response.\n\n**Type:** String\\\n**Default:** n/a\\\n**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.\n\n### `context`\n\nWhen `true`, includes the context data assigned to each resource. Helpful in retrieving alt text or custom metadata configured for the media file in Cloudinary.\n\n**Type:** Boolean\\\n**Default:** n/a\n\n### `secureDistribution`\n\nThe custom domain name (CNAME) to use for building secure URLs (`https`).\n\nRelevant only for users on the Advanced plan or higher that have a custom CNAME. For details, see [Private CDNs and CNAMEs](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames).\n\n**Type:** String\\\n**Default:** n/a\n\n### `cname`\n\nThe custom domain name (CNAME) to use for building non-secure URLs (`http`).\n\nRelevant only for users on the Advanced plan or higher that have a custom CNAME. For details, see [Private CDNs and CNAMEs](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames).\n\n**Type:** String\\\n**Default:** n/a\n\n### `privateCdn`\n\nRelevant only for users on the Advanced plan or higher that have private CDN distribution. For details, see [Private CDNs and CNAMEs](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames).\n\n**Type:** Boolean\\\n**Default:** false\n\n\u0026nbsp;\n\n## ⚠️ Gotchas\n\n- 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.\n- `f_auto` and `q_auto` Cloudinary transformations are applied automatically to the `secure_url` and `url` value optimizing the delivered media quality and format.\n- If you use this plugin together with [`gatsby-transformer-cloudinary`](https://www.gatsbyjs.com/plugins/gatsby-transformer-cloudinary/) the secureDistribution, cname and privateCdn options do not carry over, and there is no way to set them in that plugin.\n\n\u0026nbsp;\n\n## 📚 Other Resources\n\n- [Cloudinary image transformation reference](https://cloudinary.com/documentation/image_transformation_reference)\n\n\u0026nbsp;\n\n## 🏴‍☠️ Contribute\n\nYou may improve the documentation, help fellow users, report bugs, suggest enhancements, contribute code and more.\n\nGet started by reading the [contribution docs](https://github.com/cloudinary-devs/gatsby-source-cloudinary/blob/main/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-community%2Fgatsby-source-cloudinary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudinary-community%2Fgatsby-source-cloudinary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-community%2Fgatsby-source-cloudinary/lists"}