docs: better images and overlay props

nuxt-modules · Sep 6, 2023 · 1807e80 · 1807e80
1 parent 011e174
commit 1807e80
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/docs/components/content/ImageWithEffects.vue b/docs/components/content/ImageWithEffects.vue
@@ -1,6 +1,6 @@
 <template>
   <CldImage
-    src="cld-sample-5"
+    src="images/turtle"
     width="900"
     height="900"
     alt="Sample Product"

diff --git a/docs/components/content/ImageWithOverlays.vue b/docs/components/content/ImageWithOverlays.vue
@@ -1,6 +1,6 @@
 <template>
   <CldImage
-    src="cld-sample-5"
+    src="images/sneakers"
     width="900"
     height="900"
     alt="Sample Product"

diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md
@@ -28,8 +28,8 @@ pnpm add @nuxtjs/cloudinary
 
 ```ts
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/cloudinary']
-})
+  modules: ["@nuxtjs/cloudinary"],
+});
 ```
 
 3. Create .env file with following `CLOUDINARY_CLOUD_NAME` variable:
@@ -53,6 +53,6 @@ And that's it! You can now use Clodinary in Nuxt ✨
 </template>
 ```
 
-:cld-image{src="cld-sample-5" width="900" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/sneakers" width="900" height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 See the [module options](/getting-started/options) for additional configuration.
diff --git a/docs/content/2.components/CldImage.md b/docs/content/2.components/CldImage.md
@@ -150,14 +150,14 @@ All effect props are disabled by default.
 
 The `overlays` prop is an array of objects with the following configuration options:
 
-| Property Name  | Type   | Example                                          |
-| -------------- | ------ | ------------------------------------------------ | -------------------------------- |
-| appliedEffects | array  | Same as effects, added as applied transformation |
-| effects        | array  | See Below                                        |
-| position       | object | See Below                                        |
-| publicId       | string | `"thumb"`                                        |
-| text           | object | string                                           | `"Next Cloudinary"` or See Below |
-| url            | string | `"https://.../image.jpg"`                        |
+| Property Name  | Type          | Example                                          |
+| -------------- | ------------- | ------------------------------------------------ |
+| appliedEffects | array         | Same as effects, added as applied transformation |
+| effects        | array         | See Below                                        |
+| position       | object        | See Below                                        |
+| publicId       | string        | `"thumb"`                                        |
+| text           | object/string | `"Nuxt Cloudinary"` or See Below                 |
+| url            | string        | `"https://.../image.jpg"`                        |
 
 The position property can include:
 
@@ -202,71 +202,71 @@ Below, you can see examples of usage of various effects that you can use from Cl
 zoompan="loop"
 ```
 
-:cld-image{src="cld-sample-5" width="900" zoompan="loop" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/sneakers" width="900" zoompan="loop" height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### Blur
 
 ```html
 blur="1200"
 ```
 
-:cld-image{src="cld-sample-5" width="900" blur="1200" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/turtle" width="900" blur="1200" height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### Pixelate
 
 ```html
 pixelate
 ```
 
-:cld-image{src="cld-sample-5" width="900" pixelate height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/mountain" width="900" pixelate height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### Grayscale
 
 ```html
 grayscale
 ```
 
-:cld-image{src="cld-sample-5" width="900" grayscale height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/galaxy" width="900" grayscale height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### Tint
 
 ```html
 tint="equalize:80:blue:blueviolet"
 ```
 
-:cld-image{src="cld-sample-5" width="900" tint="equalize:80:blue:blueviolet" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/mountain" width="900" tint="equalize:80:blue:blueviolet" height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### Opacity
 
 ```html
 opacity="50"
 ```
 
-:cld-image{src="cld-sample-5" width="900" opacity="50" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/turtle" width="900" opacity="50" height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### Shear
 
 ```html
 shear="40:0"
 ```
 
-:cld-image{src="cld-sample-5" width="900" shear="40:0" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/sneakers" width="900" shear="40:0" height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### Border
 
 ```html
 border="40px_solid_purple"
 ```
 
-:cld-image{src="cld-sample-5" width="900" border="40px_solid_purple" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/turtle" width="900" border="40px_solid_purple" height="900" alt="test" style="text-align: center; margin: 0 auto"}
 
 ### fillBackground
 
 ```html
 fillBackground
 ```
 
-:cld-image{src="cld-sample-5" width="1200" height="1200" alt="test" fillBackground style="text-align: center; margin: 0 auto"}
+:cld-image{src="images/woman-headphones" width="1200" height="1200" alt="test" fillBackground style="text-align: center; margin: 0 auto"}
 
 ### Multiple Effects