examples

cloudinary-community · Sep 8, 2023 · bd7e0b5 · bd7e0b5
1 parent da9eb37
commit bd7e0b5
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 90 deletions.
diff --git a/docs/src/data/images.json b/docs/src/data/images.json
@@ -3,48 +3,64 @@
     "width": 2376,
     "height": 1574,
     "src": "/images/examples/beach.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726174-aeca546d-1589-4dd2-90a7-b1e78867d196.jpeg",
+    "srcCloudinary": "images/examples/beach.jpeg",
     "title": "Beach"
   },
   {
     "width": 1364,
     "height": 1705,
     "src": "/images/examples/city.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726176-48c8b53d-1054-45e3-9311-71cf4947147f.jpeg",
+    "srcCloudinary": "images/examples/city.jpeg",
     "title": "City"
   },
   {
     "width": 2344,
     "height": 1560,
     "src": "/images/examples/earth.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726178-f2e89dba-b14b-49c1-8ef9-2e2c66a8b046.jpeg",
+    "srcCloudinary": "images/examples/earth.jpeg",
     "title": "Earth"
   },
   {
     "width": 2340,
     "height": 1560,
     "src": "/images/examples/galaxy.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726180-0ed180bc-4918-45b6-bda2-0c29538c19ac.jpeg",
+    "srcCloudinary": "images/examples/galaxy.jpeg",
     "title": "Galaxy"
   },
   {
     "width": 2148,
     "height": 1611,
     "src": "/images/examples/iceberg.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726182-4a0152df-fd79-4986-8459-e02f079aca6f.jpeg",
+    "srcCloudinary": "images/examples/iceberg.jpeg",
     "title": "Iceberg"
   },
   {
     "width": 1364,
     "height": 1705,
     "src": "/images/examples/jungle.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726185-801d9914-1208-48cc-95ab-8d8d2d63575f.jpeg",
+    "srcCloudinary": "images/examples/jungle.jpeg",
     "title": "Jungle"
   },
   {
     "width": 2340,
     "height": 1561,
     "src": "/images/examples/mountain.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726186-cc658080-15ea-45d3-a7f1-1ccff217f7c0.jpeg",
+    "srcCloudinary": "images/examples/mountain.jpeg",
     "title": "Mountain"
   },
   {
     "width": 2340,
     "height": 1560,
     "src": "/images/examples/waterfall.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726189-51a8b091-931f-43fe-99ae-9f9d17942db5.jpeg",
+    "srcCloudinary": "images/examples/waterfall.jpeg",
     "title": "Waterfall"
   }
 ]
diff --git a/docs/src/pages/examples/_meta.json b/docs/src/pages/examples/_meta.json
diff --git a/docs/src/pages/examples/cdn-images.mdx b/docs/src/pages/examples/cdn-images.mdx
@@ -0,0 +1,30 @@
+import { getCldImageUrl } from 'next-cloudinary';
+
+import images from '../../data/images.json';
+
+# CDN Images
+
+Images that are being sourced from an external CDN.
+
+export const Grid = () => {
+  return (
+    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
+      {images.map((image) => {
+        return (
+          <li key={image.src}>
+            <img
+              src={image.srcCdn}
+              width={image.width}
+              height={image.height}
+              alt={image.title}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  )
+}
+
+## Demo
+
+<Grid />
diff --git a/docs/src/pages/examples/client-images.mdx b/docs/src/pages/examples/client-images.mdx
@@ -4,7 +4,9 @@ import images from '../../data/images.json';
 
 # Client Images
 
-Images loaded in 1 second clientside after the application renders.
+Images loaded in 1 second clientside after the application renders. Each image
+is loaded from the local `/images`, which because it's not available in the initial
+page output, hits a redirect to a Cloudinary image.
 
 export const Grid = () => {
   const [isLoaded, setIsLoaded] = useState(false);
@@ -38,38 +40,4 @@ export const Grid = () => {
 
 ## Demo
 
-<Grid />
-
-## Code
-
-```
-export const Grid = () => {
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setIsLoaded(true);
-    }, 1000);
-  }, []);
-
-  return (
-    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
-      {isLoaded && images.map((image) => {
-        return (
-          <li key={image.src}>
-            <img
-              src={image.src}
-              width={image.width}
-              height={image.height}
-              alt={image.title}
-            />
-          </li>
-        );
-      })}
-      {!isLoaded && (
-        <p className="font-bold">Loading...</p>
-      )}
-    </ul>
-  )
-}
-```
+<Grid />
diff --git a/docs/src/pages/examples/cloudinary-images.mdx b/docs/src/pages/examples/cloudinary-images.mdx
@@ -0,0 +1,32 @@
+import { getCldImageUrl } from 'next-cloudinary';
+
+import images from '../../data/images.json';
+
+# Cloudinary Images
+
+Images already being delivered from Cloudinary will not be replaced.
+
+export const Grid = () => {
+  return (
+    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
+      {images.map((image) => {
+        return (
+          <li key={image.src}>
+            <img
+              src={getCldImageUrl({
+                src: image.srcCloudinary
+              })}
+              width={image.width}
+              height={image.height}
+              alt={image.title}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  )
+}
+
+## Demo
+
+<Grid />
diff --git a/docs/src/pages/examples/local-images.mdx b/docs/src/pages/examples/local-images.mdx
@@ -2,7 +2,8 @@ import images from '../../data/images.json';
 
 # Local Images
 
-Loaded from the default directory of `/images`
+Images loaded from the default local directory of `/images` which
+are then replaced in the page output.
 
 export const Grid = () => {
   return (
@@ -25,27 +26,4 @@ export const Grid = () => {
 
 ## Demo
 
-<Grid />
-
-## Code
-
-```
-export const Grid = () => {
-  return (
-    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
-      {images.map((image) => {
-        return (
-          <li key={image.src}>
-            <img
-              src={image.src}
-              width={image.width}
-              height={image.height}
-              alt={image.title}
-            />
-          </li>
-        );
-      })}
-    </ul>
-  )
-}
-```
+<Grid />
diff --git a/docs/src/pages/examples/next-image.mdx b/docs/src/pages/examples/next-image.mdx
@@ -27,27 +27,4 @@ export const Grid = () => {
 
 ## Demo
 
-<Grid />
-
-## Code
-
-```
-export const Grid = () => {
-  return (
-    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
-      {images.map((image) => {
-        return (
-          <li key={image.src}>
-            <Image
-              src={image.src}
-              width={image.width}
-              height={image.height}
-              alt={image.title}
-            />
-          </li>
-        );
-      })}
-    </ul>
-  )
-}
-```
+<Grid />