{"id":13725223,"url":"https://github.com/cloudinary-community/gatsby-transformer-cloudinary","last_synced_at":"2025-04-25T16:32:06.794Z","repository":{"id":37858965,"uuid":"209687099","full_name":"cloudinary-community/gatsby-transformer-cloudinary","owner":"cloudinary-community","description":"Use Cloudinary images with gatsby-image for high performance and total control!","archived":false,"fork":false,"pushed_at":"2024-04-05T17:24:33.000Z","size":7517,"stargazers_count":69,"open_issues_count":12,"forks_count":28,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-04-13T18:51:20.623Z","etag":null,"topics":["cloudinary","gatsby","gatsby-plugin","hacktoberfest","image","transformer"],"latest_commit_sha":null,"homepage":"https://gatsby-transformer-cloudinary.netlify.com","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":"2019-09-20T02:20:57.000Z","updated_at":"2024-05-10T04:39:06.780Z","dependencies_parsed_at":"2023-10-15T03:41:39.353Z","dependency_job_id":"64cc38d7-f87c-4b67-978f-8f091b7a5c1e","html_url":"https://github.com/cloudinary-community/gatsby-transformer-cloudinary","commit_stats":{"total_commits":332,"total_committers":14,"mean_commits":"23.714285714285715","dds":"0.49397590361445787","last_synced_commit":"77ae882312486de591a5e2cf2b6bf74469f977c6"},"previous_names":["cloudinary-community/gatsby-transformer-cloudinary","cloudinary-devs/gatsby-transformer-cloudinary"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-transformer-cloudinary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-transformer-cloudinary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-transformer-cloudinary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-community%2Fgatsby-transformer-cloudinary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudinary-community","download_url":"https://codeload.github.com/cloudinary-community/gatsby-transformer-cloudinary/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224007877,"owners_count":17240294,"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":["cloudinary","gatsby","gatsby-plugin","hacktoberfest","image","transformer"],"created_at":"2024-08-03T01:02:16.239Z","updated_at":"2024-11-10T20:14:30.957Z","avatar_url":"https://github.com/cloudinary-community.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Gatsby Transformer Cloudinary\n\nWith `gatsby-transformer-cloudinary` you may:\n\n- 🖼️ Add [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) support to any GraphQL Types describing a Cloudinary assets.\n- 📤 Upload local and remote images to [Cloudinary](https://cloudinary.com/) from within your Gatsby project.\n\n📥 But if you want to pull data from your Cloudinary account into the Gatsby data layer use our other plugin, [gatsby-source-cloudinary](https://www.github.com/cloudinary-devs/gatsby-source-cloudinary/)\n\n**This is a community library supported by the Cloudinary Developer Experience team.**\n\n## 📖 Table of Contents\n\n- [🖼️ Add Gatsby Image Support to Existing Cloudinary Assets](#🖼️-add-gatsby-image-support-to-existing-cloudinary-assets)\n  - [Install Packages](#install-packages)\n  - [Configure Plugins](#configure-plugins)\n  - [Example usage](#example-usage)\n  - [Sanity.io Configuration](#sanityio-configuration)\n  - [Contentful Configuration](#contentful-configuration)\n- [📤 Upload local images and add Gatsby Image Support](#📤-upload-local-images-and-add-gatsby-image-support)\n  - [Install Packages](#install-packages-1)\n  - [Configure Plugins](#configure-plugins-1)\n  - [Example usage](#example-usage-1)\n- [📤 Upload remote images and add Gatsby Image Support](#📤-upload-remote-images-and-add-gatsby-image-support)\n  - [Install Packages](#install-packages-2)\n  - [Configure Plugins](#configure-plugins-2)\n  - [Example Usage](#example-usage-2)\n- [🔌 Pugin Options](#🔌-plugin-options)\n- [🖼️ Gatsby Image API](#🖼️-gatsby-plugin-image-gatsbyimagedata-api)\n- [📚 Other Resources](#📚-other-resources)\n- [🏴‍☠️ Contribute](#🏴‍☠️-contribute)\n\n\u0026nbsp;\n\n## 🖼️ Add Gatsby Image Support to Existing Cloudinary Assets\n\nInformation about Existing Cloudinary Assets is sourced into the Gatsby data layer using a plugin like [gatsby-source-contentful](https://www.gatsbyjs.com/plugins/gatsby-source-contentful/), [gatsby-source-sanity](https://www.gatsbyjs.com/plugins/gatsby-source-sanity/) etc. or a custom source plugin.\n\n- The plugin adds the `gatsbyImageData` resolver to the sourced GraphQL Types configured.\n\nThe GraphQL Type must describe an existing Cloudinary asset and [contain the following data](#transform-type-requierments).\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    // Some source plugin creating a GraphQL Type named `BlogPostHeroImage`\n    {\n      resolve: `gatsby-transformer-cloudinary`,\n      options: {\n        transformTypes: [\n          // Assumes a GraphQL Type named `BlogPostHeroImage`\n          // Could be a `BlogPost` node with a `heroImage` field\n          // with the required data shape\n          `BlogPostHeroImage`,\n        ],\n        // Optional transformation option\n        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],\n      },\n    },\n    `gatsby-plugin-image`,\n  ],\n};\n```\n\n### Example Usage\n\n```jsx\n// File: ./pages/{BlogPost.slug}.js\n\nimport React from 'react';\nimport { graphql } from 'gatsby';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\nconst BlogPost = ({ data }) =\u003e {\n  const { blogPost } = data;\n  const gatsbyImage = getImage(blogPost.heroImage);\n  return (\n    \u003carticle\u003e\n      \u003ch1\u003e{blogPost.title}\u003c/h1\u003e\n      \u003cGatsbyImage image={gatsbyImage} aria-hidden=\"true\" alt=\"Hero Image\" /\u003e\n      {/* ... */}\n    \u003c/article\u003e\n  );\n};\n\nexport const query = graphql`\n  query BlogPostById($id: String!) {\n    blogPost(id: { eq: $id }) {\n      title\n      heroImage {\n        gatsbyImageData(\n          height: 300\n          aspectRatio: 2\n          placeholder: TRACED_SVG\n          transformations: [\"c_fill\", \"e_grayscale\"]\n        )\n      }\n    }\n  }\n`;\n\nexport default BlogPost;\n```\n\n### Transform Type Requirements\n\nGatsby Image support may be added to any GraphQL Type describing a Cloudinary asset with the following data:\n\n```js\n{\n  // Required\n  cloud_name: \"my-amazing-blog\",\n  public_id: \"blue-blue-blue\",\n  // Optional: Saves a network request for size/format data per image queried if all are added\n  heigh: 360,\n  width: 820,\n  format: \"jpg\",\n  // Optional: Saves a Cloudinary transformation per image queried with `placeholder=BLURRED` as this value will be used instead\n  base64: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMMXG/8HwAEwAI0Bj1bnwAAAABJRU5ErkJggg==\",\n  // Optional: Saves a Cloudinary transformation per image queried with `placeholder=TRACED_SVG` as this value will be used instead\n  tracedSVG: \"data:image/svg+xml,%3Csvg%20height%3D%229999%22%20viewBox%3D%220%200%209999%209999%22%20width%3D%229999%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0%200h9999v9999h-9999z%22%20fill%3D%22%23f9fafb%22%2F%3E%3C%2Fsvg%3E\",\n}\n```\n\nIf the GraphQL Type does not have the required data shape, you may configure how to resolve the data using the `transformTypes` configuration option:\n\n```js\n// File: ./gatsby-config.js\n\nmodule.exports = {\n  plugins: [\n    // Some source plugin creating a GraphQL Type named `BlogPostHeroImage`\n    {\n      resolve: `gatsby-transformer-cloudinary`,\n      options: {\n        transformTypes: [\n          {\n            type: `CustomType`,\n            // Use a static value\n            cloudName: 'my-cld-cloud',\n            // Resolve a value using a function\n            height: (data) =\u003e data.metadata?.height,\n          },\n        ],\n        // Optional transformation option\n        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],\n      },\n    },\n    `gatsby-plugin-image`,\n  ],\n};\n```\n\nTo find the GraphQL Type describing your Cloudinary assets use the built-in [GraphiQL exlorer](https://www.gatsbyjs.com/docs/how-to/querying-data/running-queries-with-graphiql/)](https://www.gatsbyjs.com/docs/how-to/querying-data/running-queries-with-graphiql/). Either hover over the field describing the asset or look in the \"Documentation Explorer\".\n\n`defaultBase64` and `defaultTracedSVG` is the base64 URI of the placeholder image, it must comply with [RFC 2397](https://tools.ietf.org/html/rfc2397).\n\n### Private CDNs and custom delivery hostnames (CNAMEs)\n\nIf you are using a private CDN or a custom delivery hostname (CNAME) you may configure the plugin to do so. Read more about [Private CDNs and CNAMEs](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames).\n\n```js\n// File: ./gatsby-config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-transformer-cloudinary`,\n      options: {\n        transformTypes: [\n          {\n            type: `CloudinaryAsset`,\n            secureDistribution: 'my-domain.com',\n\n            // Or using privateCdn\n            // privateCdn: true,\n\n            // Or using cname\n            // secure: false,\n            // cname: 'my-domain.com',\n          },\n        ],\n        // Optional transformation option\n        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],\n      },\n    },\n    `gatsby-plugin-image`,\n  ],\n};\n```\n\n### Sanity.io Configuration\n\nIf you are using [Sanity.io](https://www.sanity.io/) and the [gatsby-source-sanity](https://www.gatsbyjs.com/plugins/gatsby-source-sanity/) plugin use the following configuration to add the `gatsbyImageData` resolver to the sourced Sanity Cloudinary assets:\n\n```js\n// File: ./gatsby-config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-sanity`,\n      options: {\n        projectId: process.env.SANITY_PROJECT_ID,\n        dataset: process.env.SANITY_DATASET,\n        token: process.env.SANITY_TOKEN,\n      },\n    },\n    {\n      resolve: `gatsby-transformer-cloudinary`,\n      options: {\n        transformTypes: [\n          {\n            type: 'SanityCloudinaryAsset',\n            // Dynamically get the cloud name\n            // from SanityCloudinaryAsset.url\n            cloudName: (data) =\u003e {\n              const findCloudName = new RegExp('(cloudinary.com/)([^/]+)', 'i');\n              const result = data.url.match(findCloudName);\n              return result[1];\n            },\n            // Or set it statically if all assets are from the same Cloudinary account\n            // cloudName: \"my-cld-cloud\",\n          },\n        ],\n      },\n    },\n    `gatsby-plugin-image`,\n  ],\n};\n```\n\n### Contentful Configuration\n\nIf you are using [Contentful](https://www.contentful.com/) and the [gatsby-source-contentful](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful) plugin use the following configuration to add the `gatsbyImageData` resolver to the sourced Cloudinary assets:\n\n```js\n// File: ./gatsby-config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-contentful`,\n      options: {\n        spaceId: process.env.CONTENTFUL_SPACE_ID,\n        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,\n      },\n    },\n    {\n      resolve: `gatsby-transformer-cloudinary`,\n      options: {\n        transformTypes: [\n          {\n            // ❗❕ Replace `contentfulBlogPostFeaturedImageJsonNode`\n            // with the name of the GraphQL Type describing your Cloudinary assets\n            // will always start with `contentful` and end with `JsonNode`\n            type: 'contentfulBlogPostFeaturedImageJsonNode',\n\n            // Dynamically get the cloud name\n            // from SanityCloudinaryAsset.url\n            cloudName: (data) =\u003e {\n              const findCloudName = new RegExp('(cloudinary.com/)([^/]+)', 'i');\n              const result = data.url.match(findCloudName);\n              return result[1];\n            },\n            // Or set it statically if all assets are from the same cloud\n            // cloudName: 'my-cld-cloud',\n          },\n        ],\n      },\n    },\n    `gatsby-plugin-image`,\n  ],\n};\n```\n\n\u0026nbsp;\n\n## 📤 Upload Local Images and Add Gatsby Image Support\n\nIf you upload local images to Cloudinary and skip the gatsby-transformer-sharp you speed up your build process and enjoy Cloudinary's transformations:\n\n- The plugin creates a `CloudinaryAsset` node for each image.\n- The plugin adds a `gatsbyImageData` resolver to each node by default.\n\nThis configuration and example assumes you have your images folder in the root of your project.\n\n### Install packages\n\n```bash\nnpm install gatsby-transformer-cloudinary gatsby-source-filesystem gatsby-plugin-image\n```\n\nor\n\n```bash\nyarn add gatsby-transformer-cloudinary gatsby-source-filesystem 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-filesystem`,\n      options: {\n        name: `gallery`,\n        path: `${__dirname}/gallery`,\n      },\n    },\n    {\n      resolve: 'gatsby-transformer-cloudinary',\n      options: {\n        // Required for uploading\n        cloudName: process.env.CLOUDINARY_CLOUD_NAME,\n        apiKey: process.env.CLOUDINARY_API_KEY,\n        apiSecret: process.env.CLOUDINARY_API_SECRET,\n        // Optional uploading options\n        uploadFolder: process.env.CLOUDINARY_UPLOAD_FOLDER,\n        uploadSourceInstanceNames: ['gallery'],\n        overwriteExisting: process.env.NODE_ENV === 'production' ? true : false,\n        // Optional transformation options\n        transformTypes: ['CloudinaryAsset'],\n        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],\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\nExample of the plugin fetching an asset using the `useStaticQuery` API of Gatsby:\n\n```jsx\n// File ./components/local-upload.js\n\nimport React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\nconst LocalUploadExample = () =\u003e {\n  // Using gatsby-transformer-sharp\n  // commented out for comparison\n\n  // const data = useStaticQuery(graphql`\n  //   query {\n  //     file(name: { eq: \"sergey-semin-unsplash\" }) {\n  //       childImageSharp {\n  //         gatsbyImageData(height: 300, layout: FIXED)\n  //       }\n  //     }\n  //   }\n  // `);\n\n  const data = useStaticQuery(graphql`\n    query {\n      file(name: { eq: \"sergey-semin-unsplash\" }) {\n        childCloudinaryAsset {\n          gatsbyImageData(height: 300, layout: FIXED)\n        }\n      }\n    }\n  `);\n\n  // const gatsbyImage = getImage(data.file.childImageSharp);\n  const gatsbyImage = getImage(data.file.childCloudinaryAsset);\n\n  return (\n    \u003cGatsbyImage\n      image={gatsbyImage}\n      alt=\"Pirate photo by Sergey Semin from Unsplash.\"\n    /\u003e\n  );\n};\n\nexport default LocalUploadExample;\n```\n\n\u0026nbsp;\n\n## 📤 Upload Remote Images and add Gatsby Image Support\n\nUpload remote images referenced in any node to Cloudinary and enjoy Cloudinary's transformations:\n\n- The plugin creates a `CloudinaryAsset` node for each image.\n- The plugin adds the `gatsbyImageData` resolver to each node by default.\n\nUploading remote image requires you to write some custom code. We'd like to make it configurable instead, let us know if you'd benefit by [joining the discussion](https://github.com/cloudinary-devs/gatsby-transformer-cloudinary/discussions/207).\n\nThis configuration and example assumes your Gatsby Data Layer has at least one node of type `Project` with a `coverImageUrl` field containg a url pointing to a publically available image file.\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-transformer-cloudinary',\n      options: {\n        // Required for uploading\n        cloudName: process.env.CLOUDINARY_CLOUD_NAME,\n        apiKey: process.env.CLOUDINARY_API_KEY,\n        apiSecret: process.env.CLOUDINARY_API_SECRET,\n        // Optional uploading options\n        uploadFolder: process.env.CLOUDINARY_UPLOAD_FOLDER,\n        overwriteExisting: process.env.NODE_ENV === 'production' ? true : false,\n        // Optional transformation options\n        transformTypes: ['CloudinaryAsset'],\n        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],\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```js\n// File: ./gatsby-node.js\n\nimport { createRemoteImageNode } from 'gatsby-transformer-cloudinary';\n\nexport async function onCreateNode({\n  node,\n  actions: { createNode },\n  createNodeId,\n  createContentDigest,\n  reporter,\n}) {\n  if (node.internal.type === 'Project' \u0026\u0026 node.coverImageUrl) {\n    // Upload the image to Cloudinary\n    const imageNode = await createRemoteImageNode({\n      url: node.coverImageUrl,\n      parentNode: node,\n      createNode,\n      createNodeId,\n      createContentDigest,\n      reporter,\n    });\n\n    // Add node field to be used by \"createSchemaCustomization\"\n    createNodeField({ node: node, name: 'coverImage', value: imageNode.id });\n  }\n}\n\nexports.createSchemaCustomization = (gatsbyUtils) =\u003e {\n  const { actions } = gatsbyUtils;\n\n  // Connect the node to the CloudinaryAsset using @link\n  const ProjectType = `\n      type Project implements Node  {\n        coverImageUrl: String!\n        coverImage: CloudinaryAsset @link(from: \"fields.coverImage\" by: \"id\")\n      }\n    `;\n\n  actions.createTypes([ProjectType]);\n};\n```\n\n```jsx\n// File: ./pages/{Article.slug}.js\n\nimport React from 'react';\nimport { graphql } from 'gatsby';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\nconst Project = ({ data }) =\u003e {\n  const { project } = data;\n  const gatsbyImage = getImage(project.coverImage);\n  return (\n    \u003carticle\u003e\n      \u003ch1\u003e{project.name}\u003c/h1\u003e\n      \u003cGatsbyImage image={gatsbyImage} aria-hidden=\"true\" alt=\"Cover Image\" /\u003e\n      {/* ... */}\n    \u003c/article\u003e\n  );\n};\n\nexport const query = graphql`\n  query ProjectById($id: String!) {\n    project(id: { eq: $id }) {\n      name\n      coverImage {\n        gatsbyImageData(\n          height: 300\n          aspectRatio: 2\n          placeholder: TRACED_SVG\n          transformations: [\"c_fill\", \"g_auto:subject\", \"q_auto\"]\n        )\n      }\n    }\n  }\n`;\n\nexport default Project;\n```\n\n\u0026nbsp;\n\n## 🔌 Plugin Options\n\nIn `gatsby-config.js` the plugin accepts the following options:\n\n### `cloudName` (required for upload functionality)\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 for upload functionality)\n\nYou'll find your Cloudinary API Key in the [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 for upload functionality)\n\nYou'll find your Cloudinary API Secret in your [Cloudinary console](https://cloudinary.com/console/).\n\n#### `secure`\n\nWhen set to `false` uses `http` instead of `https` for the image urls.\n\n**Type:** `Boolean`\n**Default:** `true`\n\n#### `height` / `width`\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### `uploadFolder`\n\nAn optional folder name where the uploaded assets will be stored on Cloudinary.\n\n**Type:** `String`\\\n**Default:** n/a\\\n\n### `uploadSourceInstanceNames`\n\nAn optional array limiting uploads to file nodes with a matching `sourceInstanceName`.\n\n**Type:** `[String]`\\\n**Default:** n/a\\\n\n### `transformTypes`\n\nAn optional array of GraphQL Types to add the `gatsbyImageData` resolver for Gatsby Image support.\n\n**Type:** `[String] | [Object]`\\\n**Default:** `['CloudinaryAsset']`\n\n### `overwriteExisting`\n\nWhether to overwrite existing assets with the same public ID. When set to false, return immediately if an asset with the same Public ID was found. It's recommended that this is set to false in development as each image overwrite costs one Cloudinary transformation.\n\n**Type:** `Boolean`\\\n**Default:** `false`\n\n### `defaultTransformations`\n\nThe default value for the `gatsbyImageData` resolver argument `transformations`.\n\n**Type:** `[String]`\\\n**Default:** `['c_fill', 'g_auto', 'q_auto']`\n\n\u0026nbsp;\n\n## 🖼️ Gatsby Plugin Image (`gatsbyImageData`) API\n\nThe plugin supports [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) by adding a `gatsbyImageData` resolver to the configured GraphQL types.\n\n### Arguments for `gatsbyImageData`\n\n#### `transformations`\n\nAn array of \"raw\" cloudinary transformations added to the initial transformation together with the `width` and `height`.\n\n**Type:** `[String]`\\\n**Default:**`[\"c_fill\", \"g_auto\", \"q_auto\"]` or the configured `defaultTransformations`\\\n**Example:** `[\"c_crop\", \"x_300\"]`\n\n\u003e **WARNING:** Changing the sizing using transformations will mess with the Gatsby Image Component\n\n#### `chained`\n\nAn array of \"raw\" cloudinary transformations added after the initial transformations above.\n\n**Type:** `[String]`\\\n**Default:** `[]`\\\n**Example:** `[\"e_grayscale\",\"e_pixelate_faces,e_tint:100:663399:0p:white:100p\"]`\n\n\u003e **WARNING:** Changing the sizing using chained transformations will mess with the Gatsby Image Component\n\n#### `placeholder`\n\nThe style of the temporary image shown while the larger image is loaded.\n\n**Type:** `NONE`, `BLURRED` or `TRACED_SVG`\\\n**Default:** `NONE`\\\n**Example:** `BLURRED`\n\n\u003e **NOTE:** `DOMINANT_COLOR` is not supported\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#placeholder) for more information.\n\n#### `height` / `width`\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#widthheight) on `height` / `width`.\n\n#### `aspectRatio`\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#aspectratio) on `aspectRatio`.\n\n#### `layout`\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#layout) on `layout`.\n\n#### `backgroundColor`\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#all-options) on `backgroundColor`.\n\n#### `breakpoints`\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#all-options) on `breakpoints`.\n\n#### `outputPixelDensities`\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#all-options) on `outputPixelDensities`.\n\n#### `sizes`\n\nRead the [Gatsby Plugin Image Docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#all-options) on `sizes`.\n\n### `secure`\n\nWhen set to `false` use non-secure URLs (`http`) instead of secure URLs(`https`) for the image URLs.\n\n**Type:** `Boolean`\\\n**Default:** `true`\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`), remember to set `secure` to `false` when using `cname`.\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## 📚 Other Resources\n\n- [Cloudinary image transformation reference](https://cloudinary.com/documentation/image_transformation_reference)\n- [Try the gatsby-source-cloudinary plugin to source media files into Gatsby file nodes](https://www.npmjs.com/package/gatsby-source-cloudinary)\n- [Using Cloudinary image service for media optimization](https://www.gatsbyjs.org/docs/using-cloudinary-image-service/)\n- [Watch Jason Lengstorf build this plugin's first version](https://www.learnwithjason.dev/build-a-gatsby-transformer-plugin-for-cloudinary)\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-transformer-cloudinary/blob/main/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-community%2Fgatsby-transformer-cloudinary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudinary-community%2Fgatsby-transformer-cloudinary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-community%2Fgatsby-transformer-cloudinary/lists"}