reverting and providing both url and secure_url to node

cloudinary-community · Oct 9, 2023 · 40f8896 · 40f8896
1 parent ef35b43
commit 40f8896
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -89,7 +89,8 @@ export const query = graphql`
   query {
     allCloudinaryMedia {
       nodes {
-        url
+        secure_url
+        # url - if using secure: false
       }
     }
   }
@@ -259,6 +260,8 @@ When `true`, includes the context data assigned to each resource. Helpful in ret
 
 Force HTTPS URLs for asset delivery even if they are embedded in non-secure HTTP pages. In most cases, it's recommended to keep this parameter as `true`.
 
+When using `true`, URLs will be returned using `secure_url` following Cloudinary's resource response, otherwise, will be returned as `url`.
+
 **Type:** Boolean\
 **Default:** true
 
@@ -286,7 +289,7 @@ Set this parameter to true if you are an Advanced plan user with a private CDN d
 ## ⚠️ Gotchas
 
 - 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 `url` value optimizing the delivered media quality and format.
+- `f_auto` and `q_auto` Cloudinary transformations are applied automatically to the `secure_url` or `url` value optimizing the delivered media quality and format.
 
 &nbsp;
 

diff --git a/demo/src/pages/basic.js b/demo/src/pages/basic.js
@@ -9,7 +9,7 @@ export default function BasicPage({ data }) {
           key={index}
           alt={media.context?.custom?.alt}
           width="200px"
-          src={media.url}
+          src={media.secure_url}
         />
       ))}
     </main>
@@ -20,7 +20,7 @@ export const query = graphql`
   query {
     allCloudinaryMedia {
       nodes {
-        url
+        secure_url
         context {
           custom {
             alt

diff --git a/demo/src/pages/index.js b/demo/src/pages/index.js
@@ -36,7 +36,7 @@ export default function IndexPage({ data }) {
         </tr>
 
         {data.allCloudinaryMedia.nodes.map((media) => {
-          const { url, context } = media;
+          const { secure_url, context } = media;
           const example1Image = getImage(media.example1ImageData);
           const example2Image = getImage(media.example2ImageData);
           const example3Image = getImage(media.example3ImageData);
@@ -49,7 +49,7 @@ export default function IndexPage({ data }) {
                 <img
                   width="300"
                   style={{ maxWidth: '100%', display: 'block' }}
-                  src={url}
+                  src={secure_url}
                   alt={alt}
                 />
               </td>
@@ -86,7 +86,7 @@ export const query = graphql`
     }
     allCloudinaryMedia {
       nodes {
-        url
+        secure_url
         gatsbyImageData(width: 300, placeholder: BLURRED)
         example1ImageData: gatsbyImageData(
           width: 300

diff --git a/plugin/gatsby-node.js b/plugin/gatsby-node.js
@@ -33,15 +33,27 @@ const getNodeData = (
   gatsbyUtils,
   media,
   cloudName,
-  secure,
   cname,
   secureDistribution,
   privateCdn,
 ) => {
   const { createNodeId, createContentDigest } = gatsbyUtils;
 
+  // When Cloudinary returns a resource via the API, they return both
+  // a secure_url and a url, with the url including `http://`. We want
+  // to extend this option to what we return so that the developer
+  // can have the option of using the URL they prefer for their
+  // specific use case along with any transformations
+
   const url = generateCloudinaryUrl(media, {
-    secure: secure,
+    secure: false,
+    cname: cname,
+    secure_distribution: secureDistribution,
+    private_cdn: privateCdn,
+  });
+
+  const secureUrl = generateCloudinaryUrl(media, {
+    secure: true,
     cname: cname,
     secure_distribution: secureDistribution,
     private_cdn: privateCdn,
@@ -63,8 +75,9 @@ const getNodeData = (
     originalFormat: media.format,
     // Keep all original data around
     cloudinaryData: media,
-    // Generated url
+    // Generated urls
     url: url,
+    secure_url: secureUrl,
     // Internal
     internal: {
       type: NODE_TYPE,
@@ -79,7 +92,6 @@ const createCloudinaryNodes = async (
   cloudinary,
   resourceOptions,
   cloudName,
-  secure,
   cname,
   secureDistribution,
   privateCdn,
@@ -104,7 +116,6 @@ const createCloudinaryNodes = async (
           gatsbyUtils,
           resource,
           cloudName,
-          secure,
           cname,
           secureDistribution,
           privateCdn,