diff --git a/.stackblitz/package.json b/.stackblitz/package.json index dc7fb76..e2eaa09 100644 --- a/.stackblitz/package.json +++ b/.stackblitz/package.json @@ -11,6 +11,6 @@ "nuxt": "^3.8.0" }, "dependencies": { - "@nuxtjs/cloudinary": "^2.4.3" + "@nuxtjs/cloudinary": "^2.5.1" } } diff --git a/.stackblitz/yarn.lock b/.stackblitz/yarn.lock index c6cc5b8..3453b64 100644 --- a/.stackblitz/yarn.lock +++ b/.stackblitz/yarn.lock @@ -479,18 +479,18 @@ dependencies: mime "^3.0.0" -"@cloudinary-util/url-loader@^3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.10.0.tgz#30dbed4d60968687c9161a60b246da62d42c3e33" - integrity sha512-RNp6WayU6e5ikA7yCRqNhp0lOwLl82vLco9EwpES2si6Hb+g9yEaeTYvobD44ISQeJUnPl6e1c/AEYVSjfzwrg== +"@cloudinary-util/url-loader@^3.23.0": + version "3.23.0" + resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.23.0.tgz#694aee3b858f3a01d42953f55c17b4620973c4e9" + integrity sha512-Tp6TrAkOYkgT3CyIU4nXS4utLkYN9nquTQSNW6Qqmb7vA7Y1MaSRty+F2FHV84WETK9XQDCfdCn4B+SyH4sWWw== dependencies: - "@cloudinary-util/util" "2.2.1" + "@cloudinary-util/util" "2.3.0" "@cloudinary/url-gen" "^1.10.2" -"@cloudinary-util/util@2.2.1": - version "2.2.1" - resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.2.1.tgz#c482d9321d37d921b347858a121c161b68782bd3" - integrity sha512-MEIqn5WtPP3mxSMTNNfpqlGS1UquAXcjmVdY/t/edD/ZWVjI85viBiOMIuF0W6n6UF5gTstLymfQNYx0YO/GZg== +"@cloudinary-util/util@2.3.0": + version "2.3.0" + resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.3.0.tgz#8a2a7ad3d3f089c2fff08f53eaddd50e946048f1" + integrity sha512-0Gojd+ZRQjJQmlBEAa8Ua94amvx7uWHoUzVUEGi1S8bgF1wPcMqG07cSUGQfRwHsFQ/9XOesx76Df622E+CevA== "@cloudinary/transformation-builder-sdk@^1.2.7": version "1.2.9" @@ -1162,12 +1162,12 @@ vite-plugin-checker "^0.6.2" vue-bundle-renderer "^2.0.0" -"@nuxtjs/cloudinary@^2.4.3": - version "2.4.3" - resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.4.3.tgz#8adb778f6c1c8dd4d45d48ec1b5a0e1ceebafc2e" - integrity sha512-sBXYjEAaCjjrfMPZZjcQzZ5CqTyJF+LLDX3H3DuRwyMzi56Epmcu0RmVXHMKT6eFs0azBovLo0cq2KG6PbOQfQ== +"@nuxtjs/cloudinary@^2.5.1": + version "2.5.1" + resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.5.1.tgz#7cf81a2bc20546ecdc9a4b89c6e625ba9d17d00f" + integrity sha512-t8rnowYq12xYLfPXAvSfj+UIv3B0GtRha0qYnBHGIVJST3rzTatRdrSecGa1ZD0289oTcJdDTSZ/SJTSpUk71Q== dependencies: - "@cloudinary-util/url-loader" "^3.10.0" + "@cloudinary-util/url-loader" "^3.23.0" "@nuxt/kit" "^3.5.0" "@unpic/vue" "^0.0.23" defu "^6.1.2" diff --git a/docs/components/content/ImageWithRecolor.vue b/docs/components/content/ImageWithRecolor.vue new file mode 100644 index 0000000..fb66682 --- /dev/null +++ b/docs/components/content/ImageWithRecolor.vue @@ -0,0 +1,10 @@ + diff --git a/docs/components/content/ImageWithReplace.vue b/docs/components/content/ImageWithReplace.vue new file mode 100644 index 0000000..6537456 --- /dev/null +++ b/docs/components/content/ImageWithReplace.vue @@ -0,0 +1,10 @@ + diff --git a/docs/content/2.components/CldImage.md b/docs/content/2.components/CldImage.md deleted file mode 100644 index 0a90235..0000000 --- a/docs/content/2.components/CldImage.md +++ /dev/null @@ -1,280 +0,0 @@ -# CldImage.vue - ---- - -## Usage - -Using `CldImage.vue` component is really straight forward. It accepts the same attributes as native img tag (such us sizes, width, loading, etc) and bunch of Cloudinary specific props used to optimize the image (such as removeBackground, overlays, gravity, etc). Thanks to the auto import feature of Nuxt, you do not need to import anything. Just add `` to your template and optimize your images! - -Under the hood, this CldImage uses [Unpic](https://unpic.pics/) for delivering optimized images. Check out the documentation of Unpic for all available props and options like priority, loading, sizes, and more! - -:image-with-overlays{style="text-align: center; margin: 0 auto"} - -```html - -``` - -## Configuration - -Configuration for CldImage is the same as [useCldImageUrl](/composables/useCldImageUrl), which both use the same underlying API. - -## General Props - -| Prop Name | Type | Default | Example | -| ----------------------- | ------------------ | ------------- | ----------------------------- | -| crop | string | `"limit"` | `"thumb"` | -| deliveryType | string | `"upload"` | `"fetch"` | -| effects | array | - | `[{ background: 'blue' }]` | -| format | string | `"auto"` | `"webp"` | -| gravity | string | `"auto"` | `"faces"` | -| height | number/string | - | `600` | -| overlays | array | - | See Below | -| preserveTransformations | string | `false` | `true` | -| quality | string | `"auto"` | `"90"` | -| rawTransformations | array | - | `['e_blur:2000']` | -| removeBackground | bool/string | `false` | `true` | -| sanitize | bool | `true` if svg | `true` (Applies only to SVG) | -| seoSuffix | string | - | `my-image-content` | -| src | string | - | `"my-public-id"` | -| text | string | - | `"Next Cloudinary"` | -| transformations | string/array | - | `['my-named-transformation']` | -| underlay | string | - | `"my-public-id"` | -| underlays | array | - | See Below | -| version | number | - | `1234` | -| width | number/string | - | `600` | -| zoom | string | - | `0.5` | -| zoompan | bool/string/object | - | See Below | -| fillBackground | bool/object | - | `true` | - -## Effect Props - -All effect props are disabled by default. - -| Prop Name | Type | Example | -| ------------------ | ------------- | ---------------------------------------------------- | -| art | string | `"al_dente"` | -| autoBrightness | bool/string | `true`, `"80"` | -| autoColor | bool/string | `true`, `"80"` | -| autoContrast | bool/string | `true`, `"80"` | -| assistColorblind | bool/string | `true`, `"20"`, `"xray"` | -| background | string | `"blue"` | -| blackwhite | bool/string | `true`, `"40"` | -| blur | bool/string | `true`, `"800"` | -| blurFaces | bool/string | `true`, `"800"` | -| blurRegion | bool/string | `true`, `"1000,h_425,w_550,x_600,y_400"` | -| border | string | `"5px_solid_purple"` | -| brightness | bool/string | `true`, `"100"` | -| brightnessHSB | bool/string | `true`, `"100"` | -| cartoonify | bool/string | `true`, `"70:80"` | -| color | string | `"blue"` | -| colorize | string | `"35,co_darkviolet"` | -| contrast | bool/string | `true`, `"100"`, `"level_-70"` | -| distort | string | `"150:340:1500:10:1500:1550:50:1000"`, `"arc:180.0"` | -| fillLight | bool/string | `true`, `"70:20"` | -| gamma | bool/string | `true`, `"100"` | -| gradientFade | bool/string | `true`, `"symmetric:10,x_0.2,y_0.4"` | -| grayscale | bool | `true` | -| improve | bool/string | `true`, `"50"`, `"indoor"` | -| multiply | bool | `true` | -| negate | bool | `true` | -| oilPaint | bool/string | `true`, `"40"` | -| opacity | number/string | `40`, `"40"` | -| outline | bool/string | `true`, `"40"`, `"outer:15:200"` | -| overlay | bool | `true` | -| pixelate | bool/string | `true`, `"20"` | -| pixelateFaces | bool/string | `true`, `"20"` | -| pixelateRegion | bool/string | `true`, `"35,h_425,w_550,x_600,y_400"` | -| redeye | bool/string | `true` | -| replaceColor | string | `"saddlebrown"`, `"2F4F4F:20"`, `"silver:55:89b8ed"` | -| saturation | bool/string | `true`, `"70"` | -| screen | bool | `true` | -| sepia | bool/string | `true`, `"50"` | -| shadow | bool/string | `true`, `"50,x_-15,y_15"` | -| sharpen | bool/string | `true`, `"100"` | -| shear | string | `"20.0:0.0"` | -| simulateColorblind | bool/string | `"deuteranopia"` | -| trim | bool/string | `true`, `"50:yellow"` | -| tint | bool/string | `true`, `"100:red:blue:yellow"` | -| unsharpMask | bool/string | `true`, `"500"` | -| vectorize | bool/string | `true`, `"3:0.5"` | -| vibrance | bool/string | `true`, `"70"` | -| vignette | bool/string | `true`, `"30"` | - -[View the Cloudinary docs](https://cloudinary.com/documentation/transformation_reference#e_effect) to see learn more about using effects. - -## Overlay Props - -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 | `"Nuxt Cloudinary"` or See Below | -| url | string | `"https://.../image.jpg"` | - -The position property can include: - -| Property Name | Type | Example | -| ------------- | ------ | -------------- | -| angle | number | `45` | -| gravity | string | '"north_west"' | -| x | number | `10` | -| y | number | `10` | - -Objects in the effects array can include everything in the effects options above as well as: - -| Property Name | Type | Example | -| ------------- | ------ | -------------- | -| aspectRatio | string | `"3.0"` | -| crop | string | `10` | -| gravity | string | '"north_west"' | -| height | number | '600' | -| width | number | '600' | - -The text property can include: - -| Property Name | Type | Example | -| -------------- | ------ | ---------------------------------- | -| border | string | `"20px_solid_blue"` | -| color | string | `"blueviolet"` | -| fontFamily | string | `"Open Sans"` | -| fontSize | number | `48` | -| fontWeight | string | `"bold"` | -| letterSpacing | number | `"14"` | -| lineSpacing | number | `"14"` | -| stroke | bool | `true` in coordination with Border | -| textDecoration | string | `"underline"` | - -## Examples - -Below, you can see examples of usage of various effects that you can use from Cloudinary: - -### Zoompan - -```html -zoompan="loop" -``` - -: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="images/turtle" width="900" blur="1200" height="900" alt="test" style="text-align: center; margin: 0 auto"} - -### Pixelate - -```html -pixelate -``` - -: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="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="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="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="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="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="images/woman-headphones" width="1200" height="1200" alt="test" fillBackground style="text-align: center; margin: 0 auto"} - -### Multiple Effects - -```html -:effects="[ { background: 'green' }, { gradientFade: true }, { gradientFade: -'symetric,x_0.5' } ]" -``` - -:image-with-effects{style="text-align: center; margin: 0 auto"} diff --git a/docs/content/2.components/CldImage/1.usage.md b/docs/content/2.components/CldImage/1.usage.md new file mode 100644 index 0000000..95fbb4c --- /dev/null +++ b/docs/content/2.components/CldImage/1.usage.md @@ -0,0 +1,129 @@ +# Usage + +--- + +The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Nuxt app. With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations. + +Under the hood, this CldImage uses [Unpic](https://unpic.pics/) for delivering optimized images. Check out the documentation of Unpic for all available props and options like priority, loading, sizes, and more! + +## Basic Usage + +The basic required props include `width`, `height`, `src`, and `alt`: + +:cld-image{src="images/sneakers" width="400" height="400" alt="test" style="text-align: center; margin: 0 auto"} + +```vue + +``` + +Thanks to the auto import feature of Nuxt, you do not need to import anything. Just add `` to your template and optimize your images! + +The `src` property takes in a Cloudinary Public ID which includes the folder path along with the ID of the image itself. The `width` and the `height` should represent the rendered size and the `alt` value should be a text-based description of the image. The `sizes` prop is optional, but recommended for Responsive Sizing. + +## Transformations + +Using `CldImage.vue` component is really straight forward. It accepts the same attributes as native img tag (such us `sizes`, `width`, `loading`, etc) but also a bunch of Cloudinary specific props used to optimize/transform the image (such as `removeBackground`, `overlays`, `gravity`, etc): + +:image-with-overlays{style="text-align: center; margin: 0 auto"} + +```html + +``` + +For all available configuration options, checkout the next page. + +## Using Cloudinary URL's + +CldImage supports passing a fully qualified Cloudinary URL as the src, however, it must include a version number (/v1234) in order to be correctly parsed. + +::alert{type="info"} +The version number is required due to the variable nature of Cloudinary URLs. This helps to ensure the integretiy when during the parsing process. +:: + +```vue + +``` + +## Preserving URL Transformations + +If using a full Cloudinary URL, you might already have transformations applied to your image. + +To preserve those transformations, you can apply the `preserveTransformations` prop: + +```vue + +``` + +## Watch & Learn + + diff --git a/docs/content/2.components/CldImage/2.configuration.md b/docs/content/2.components/CldImage/2.configuration.md new file mode 100644 index 0000000..b28cd28 --- /dev/null +++ b/docs/content/2.components/CldImage/2.configuration.md @@ -0,0 +1,172 @@ +# Configuration + +--- + +The CldImage component provides a wide range of options for being able to easily optimize and transform images. + +> Configuration for CldImage is the same as [useCldImageUrl](/composables/useCldImageUrl), which both use the same underlying API. + +## Required Props + +The basic props required to use CldImage include: + +| Prop | Type | Required | Example | +| ------ | ------------- | -------- | ---------------------- | +| alt | string | Yes | Dog catching a frisbee | +| height | number/string | Yes | 600 | +| src | string | Yes | my-public-id | +| width | number/string | Yes | 600 | + +## Unpic props + +CldImage extends the Upnic Image component using Cloudinary tech. This means all props available on the Upic component are available on CldImage. Learn more on the [Unpic docs](https://unpic.pics/) + +## Basic Transformations + +The CldImage component exposes many of Cloudinary's transformations in an easy-to-use way right inside of Nuxt. + +| Prop | Type | Default | Example | More | +| --------------------- | ----------------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------ | +| crop | string | `"limit"` | `"thumb"` | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize) | +| background | string | `-` | `"blue"` | [Link](https://cloudinary.com/documentation/transformation_reference#b_background) | +| fillBackground (Beta) | `boolean/object` | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill) | +| gravity | string | `auto` | `"faces"` | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity) | +| recolor | `array/object` | `-` | `['duck', 'blue']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor) | +| remove | `string/array/object` | `-` | `apple` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove) | +| removeBackground | `boolean/string` | `false` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal) | +| replace | `array/object` | `-` | `['apple', 'banana']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_replace) | +| restore | boolean | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_restore) | +| zoom | string | `-` | `0.5` | [Link](https://cloudinary.com/documentation/transformation_reference#z_zoom) | +| zoompan | `boolean/string/object` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_zoompan) | + +## General Props + +Following props can be passed to the CldImage component to make it work in more advanced scenarios. + +| Prop Name | Type | Default | Example | +| ----------------------- | ------------------ | ------------- | ----------------------------- | +| crop | string | `"limit"` | `"thumb"` | +| deliveryType | string | `"upload"` | `"fetch"` | +| effects | array | - | `[{ background: 'blue' }]` | +| format | string | `"auto"` | `"webp"` | +| gravity | string | `"auto"` | `"faces"` | +| height | number/string | - | `600` | +| overlays | array | - | See Below | +| preserveTransformations | string | `false` | `true` | +| quality | string | `"auto"` | `"90"` | +| rawTransformations | array | - | `['e_blur:2000']` | +| removeBackground | bool/string | `false` | `true` | +| sanitize | bool | `true` if svg | `true` (Applies only to SVG) | +| seoSuffix | string | - | `my-image-content` | +| src | string | - | `"my-public-id"` | +| text | string | - | `"Nuxt Cloudinary"` | +| transformations | string/array | - | `['my-named-transformation']` | +| underlay | string | - | `"my-public-id"` | +| underlays | array | - | See Below | +| version | number | - | `1234` | +| width | number/string | - | `600` | +| zoom | string | - | `0.5` | +| zoompan | bool/string/object | - | See Below | +| fillBackground | bool/object | - | `true` | + +## Filters & Effects + +All effect props are disabled by default. + +| Prop Name | Type | Example | More | +| ------------------ | ------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------- | +| art | string | `"al_dente"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_art) | +| autoBrightness | bool/string | `true`, `"80"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_auto_brightness) | +| autoColor | bool/string | `true`, `"80"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_auto_color) | +| autoContrast | bool/string | `true`, `"80"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_auto_contrast) | +| assistColorblind | bool/string | `true`, `"20"`, `"xray"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_assist_colorblind) | +| blackwhite | bool/string | `true`, `"40"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_blackwhite) | +| blur | bool/string | `true`, `"800"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur) | +| blurFaces | bool/string | `true`, `"800"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur_faces) | +| blurRegion | bool/string | `true`, `"1000,h_425,w_550,x_600,y_400"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_blur_region) | +| border | string | `"5px_solid_purple"` | `-` | +| brightness | bool/string | `true`, `"100"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_brightness) | +| brightnessHSB | bool/string | `true`, `"100"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_brightness_hsb) | +| cartoonify | bool/string | `true`, `"70:80"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_cartoonify) | +| color | string | `"blue"` | `-` | +| colorize | string | `"35,co_darkviolet"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_colorize) | +| contrast | bool/string | `true`, `"100"`, `"level_-70"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_contrast) | +| distort | string | `"150:340:1500:10:1500:1550:50:1000"`, `"arc:180.0"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_distort) | +| fillLight | bool/string | `true`, `"70:20"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_fill_light) | +| gamma | bool/string | `true`, `"100"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gamma) | +| gradientFade | bool/string | `true`, `"symmetric:10,x_0.2,y_0.4"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gradient_fade) | +| grayscale | bool | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_grayscale) | +| improve | bool/string | `true`, `"50"`, `"indoor"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_improve) | +| multiply | bool | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_multiply) | +| negate | bool | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_negate) | +| oilPaint | bool/string | `true`, `"40"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_oil_paint) | +| opacity | number/string | `40`, `"40"` | [Link](https://cloudinary.com/documentation/transformation_reference#o_opacity) | +| outline | bool/string | `true`, `"40"`, `"outer:15:200"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_outline) | +| overlay | bool | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_overlay) | +| pixelate | bool/string | `true`, `"20"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_pixelate) | +| pixelateFaces | bool/string | `true`, `"20"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_pixelate_faces) | +| pixelateRegion | bool/string | `true`, `"35,h_425,w_550,x_600,y_400"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_pixelate_region) | +| redeye | bool/string | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_redeye) | +| replaceColor | string | `"saddlebrown"`, `"2F4F4F:20"`, `"silver:55:89b8ed"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_replace_color) | +| sanitize | bool/ | `true`, `"70"` | [Link](https://cloudinary.com/documentation/transformation_reference#fl_sanitize) | +| saturation | bool/string | `true`, `"70"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_saturation) | +| screen | bool | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_screen) | +| sepia | bool/string | `true`, `"50"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_sepia) | +| shadow | bool/string | `true`, `"50,x_-15,y_15"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_shadow) | +| sharpen | bool/string | `true`, `"100"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_sharpen) | +| shear | string | `"20.0:0.0"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_shear) | +| simulateColorblind | bool/string | `"deuteranopia"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_simulate_colorblind) | +| tint | bool/string | `true`, `"100:red:blue:yellow"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_tint) | +| trim | bool/string | `true`, `"50:yellow"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_trim) | +| unsharpMask | bool/string | `true`, `"500"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_unsharp_mask) | +| vectorize | bool/string | `true`, `"3:0.5"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_vectorize) | +| vibrance | bool/string | `true`, `"70"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_vibrance) | +| vignette | bool/string | `true`, `"30"` | [Link](https://cloudinary.com/documentation/transformation_reference#e_vignette) | + +[View the Cloudinary docs](https://cloudinary.com/documentation/transformation_reference#e_effect) to see learn more about using effects. + +## Overlays & Underlays + +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 | `"Nuxt Cloudinary"` or See Below | +| url | string | `"https://.../image.jpg"` | + +The position property can include: + +| Property Name | Type | Example | +| ------------- | ------ | -------------- | +| angle | number | `45` | +| gravity | string | '"north_west"' | +| x | number | `10` | +| y | number | `10` | + +Objects in the effects array can include everything in the effects options above as well as: + +| Property Name | Type | Example | +| ------------- | ------ | -------------- | +| aspectRatio | string | `"3.0"` | +| crop | string | `10` | +| gravity | string | '"north_west"' | +| height | number | '600' | +| width | number | '600' | + +The text property can include: + +| Property Name | Type | Example | +| -------------- | ------ | ---------------------------------- | +| border | string | `"20px_solid_blue"` | +| color | string | `"blueviolet"` | +| fontFamily | string | `"Open Sans"` | +| fontSize | number | `48` | +| fontWeight | string | `"bold"` | +| letterSpacing | number | `"14"` | +| lineSpacing | number | `"14"` | +| stroke | bool | `true` in coordination with Border | +| textDecoration | string | `"underline"` | diff --git a/docs/content/2.components/CldImage/3.examples.md b/docs/content/2.components/CldImage/3.examples.md new file mode 100644 index 0000000..70790ac --- /dev/null +++ b/docs/content/2.components/CldImage/3.examples.md @@ -0,0 +1,231 @@ +# Examples + +--- + +Below, you can see examples of usage of various effects that you can use from Cloudinary. + +## Basic transformations + +Cloudinary supports a wide variety of powerful transformations that allow you to not only deliver, but easily edit and build new images on the fly. + +### Background + +These examples will help you modify the background of your image. + +#### Remove + +`removeBackground`: Removes the background of the image using AI + +```html +removeBackground +``` + +:cld-image{src="images/woman-headphones" width="1200" height="1200" alt="test" removeBackground style="text-align: center; margin: 0 auto"} + +#### Color + +`background`: Specifies a color to use as a background. + +```html +removeBackground +background="blueviolet" +``` + +:cld-image{src="images/woman-headphones" width="1200" height="1200" alt="test" removeBackground background="blueviolet" style="text-align: center; margin: 0 auto"} + +#### Image + +`underlay`: Specifies a public ID to use as an underlaying image. + +```html +removeBackground +underlay= +``` + +:cld-image{src="images/woman-headphones" width="1200" height="1200" alt="test" removeBackground underlay="images/turtle" style="text-align: center; margin: 0 auto"} + +### Cropping + +`crop`: Specifies the mode to use when cropping an image based on the given dimensions. + +```html +crop +``` + +:cld-image{src="images/woman-headphones" width="1200" height="1200" alt="test" crop="thumb" style="text-align: center; margin: 0 auto"} + +#### Fill + +`fillBackground`: Fills the background of an image using Generative AI + +```html +fillBackground +``` + +:cld-image{src="images/woman-headphones" width="1200" height="1200" alt="test" fillBackground style="text-align: center; margin: 0 auto"} + +## Generative AI + +This section will guide you through the process of using Generative AI functionalities of Cloudinary + +### Recolor + +`recolor`: Recolors an object in an image using Generative AI + +```html +recolor={['shoelaces', 'purple']} +``` + +:image-with-recolor{style="text-align: center; margin: 0 auto"} + +### Remove Element + +`remove`: Removes an object in an image using Generative AI + +```html +remove='mountain' +``` + +:cld-image{src="images/sneakers" width="1200" height="1200" alt="test" remove="shoelaces" style="text-align: center; margin: 0 auto"} + +### Replace Object + +`replace`: Replaces an object in an image using Generative AI + +```html +replace=['turtle', 'shark'] +``` + +:image-with-replace{style="text-align: center; margin: 0 auto"} + +### Restore + +`restore`: Restores an image using Generative AI + +```html +restore +``` + +:cld-image{src="images/sneakers" width="1200" height="1200" alt="test" restore style="text-align: center; margin: 0 auto"} + +## Filters & Effects + +This section will show you examples about usage of filters and effects + +### Zoompan + +```html +zoompan="loop" +``` + +: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="images/turtle" width="900" blur="1200" height="900" alt="test" style="text-align: center; margin: 0 auto"} + +### Pixelate + +```html +pixelate +``` + +: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="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="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="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="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="images/turtle" width="900" border="40px_solid_purple" height="900" alt="test" style="text-align: center; margin: 0 auto"} + +### Multiple Effects + +```html +:effects="[ { background: 'green' }, { gradientFade: true }, { gradientFade: +'symetric,x_0.5' } ]" +``` + +:image-with-effects{style="text-align: center; margin: 0 auto"} + +## Overlays + +`overlays`: Any array of overlay objects + +```html +:overlays="[ + { + position: { + gravity: 'north', + y: 60 + }, + text: { + color: 'rgb:52a4ff80', + fontFamily: 'Source Sans Pro', + fontSize: 320, + fontWeight: 'black', + text: 'MUSIC', + letterSpacing: -10, + lineSpacing: -100, + stroke: true, + border: '20px_solid_rgb:2d0eff99', + } + }, + { + position: { + gravity: 'south', + y: 60 + }, + text: { + color: 'rgb:52a4ff80', + fontFamily: 'Source Sans Pro', + fontSize: 320, + fontWeight: 'black', + text: 'IS LIFE', + letterSpacing: -10, + lineSpacing: -100, + stroke: true, + border: '20px_solid_rgb:2d0eff99', + } + } + ]" +``` + +:image-with-overlays{style="text-align: center; margin: 0 auto"} diff --git a/docs/content/2.components/CldVideoPlayer.md b/docs/content/2.components/CldVideoPlayer.md index 0c2197f..ded8641 100644 --- a/docs/content/2.components/CldVideoPlayer.md +++ b/docs/content/2.components/CldVideoPlayer.md @@ -133,9 +133,17 @@ To customize the logo, the following options are available in the form of an obj The `playerRef` and `videoRef` props give you the ability to pass in your own ref to gain access to both the Player instance as well as the HTML video element on which the player is mounted. -To do this, create a new Ref instance and pass that in as the value of the prop: +To do this, create a new Ref instance and pass as ref to the `CldVideoPlayer` component: ```vue -const myVideoRef = ref(); ... - + + + ``` diff --git a/docs/content/3.composables/1.useCldImageUrl.md b/docs/content/3.composables/1.useCldImageUrl.md index b4d5b39..047db54 100644 --- a/docs/content/3.composables/1.useCldImageUrl.md +++ b/docs/content/3.composables/1.useCldImageUrl.md @@ -61,7 +61,7 @@ Apart from the image options, `useCldImageUrl` composable accepts two additional | sanitize | bool | `true` if svg | `true` (Applies only to SVG) | | seoSuffix | string | - | `my-image-content` | | src | string | - | `"my-public-id"` | -| text | string | - | `"Next Cloudinary"` | +| text | string | - | `"Nuxt Cloudinary"` | | transformations | string/array | - | `['my-named-transformation']`| | underlay | string | - | `"my-public-id"` | | underlays | array | - | See Below | diff --git a/docs/package.json b/docs/package.json index ad4f5df..7d67061 100755 --- a/docs/package.json +++ b/docs/package.json @@ -18,6 +18,6 @@ "nuxt": "^3.5.3" }, "dependencies": { - "@nuxtjs/cloudinary": "^2.4.1" + "@nuxtjs/cloudinary": "^2.5.1" } } diff --git a/docs/yarn.lock b/docs/yarn.lock index f66739b..98dcd8f 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -281,18 +281,18 @@ dependencies: mime "^3.0.0" -"@cloudinary-util/url-loader@^3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.10.0.tgz#30dbed4d60968687c9161a60b246da62d42c3e33" - integrity sha512-RNp6WayU6e5ikA7yCRqNhp0lOwLl82vLco9EwpES2si6Hb+g9yEaeTYvobD44ISQeJUnPl6e1c/AEYVSjfzwrg== +"@cloudinary-util/url-loader@^3.23.0": + version "3.23.0" + resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.23.0.tgz#694aee3b858f3a01d42953f55c17b4620973c4e9" + integrity sha512-Tp6TrAkOYkgT3CyIU4nXS4utLkYN9nquTQSNW6Qqmb7vA7Y1MaSRty+F2FHV84WETK9XQDCfdCn4B+SyH4sWWw== dependencies: - "@cloudinary-util/util" "2.2.1" + "@cloudinary-util/util" "2.3.0" "@cloudinary/url-gen" "^1.10.2" -"@cloudinary-util/util@2.2.1": - version "2.2.1" - resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.2.1.tgz#c482d9321d37d921b347858a121c161b68782bd3" - integrity sha512-MEIqn5WtPP3mxSMTNNfpqlGS1UquAXcjmVdY/t/edD/ZWVjI85viBiOMIuF0W6n6UF5gTstLymfQNYx0YO/GZg== +"@cloudinary-util/util@2.3.0": + version "2.3.0" + resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.3.0.tgz#8a2a7ad3d3f089c2fff08f53eaddd50e946048f1" + integrity sha512-0Gojd+ZRQjJQmlBEAa8Ua94amvx7uWHoUzVUEGi1S8bgF1wPcMqG07cSUGQfRwHsFQ/9XOesx76Df622E+CevA== "@cloudinary/transformation-builder-sdk@^1.2.7": version "1.4.0" @@ -859,12 +859,12 @@ socket.io-client "^4.6.1" ufo "^1.1.2" -"@nuxtjs/cloudinary@^2.4.1": - version "2.4.1" - resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.4.1.tgz#2708439813e36a07b2096d95ac7ff76d27daf662" - integrity sha512-nrC9uNjEdsvMJuLNIjYXGk48UZaHkI6L29gMfBq/b0zJejvTuZk/Qa2/9kKR0VvyKLKxgpRP7HLnma5R2TnebA== +"@nuxtjs/cloudinary@^2.5.1": + version "2.5.1" + resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.5.1.tgz#7cf81a2bc20546ecdc9a4b89c6e625ba9d17d00f" + integrity sha512-t8rnowYq12xYLfPXAvSfj+UIv3B0GtRha0qYnBHGIVJST3rzTatRdrSecGa1ZD0289oTcJdDTSZ/SJTSpUk71Q== dependencies: - "@cloudinary-util/url-loader" "^3.10.0" + "@cloudinary-util/url-loader" "^3.23.0" "@nuxt/kit" "^3.5.0" "@unpic/vue" "^0.0.23" defu "^6.1.2" diff --git a/package.json b/package.json index 22320b5..77d4b9d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nuxtjs/cloudinary", - "version": "2.4.3", + "version": "2.5.1", "description": "Cloudinary module for Nuxt", "license": "MIT", "type": "module", @@ -40,7 +40,7 @@ "dev": "nuxi dev playground", "dev:build": "nuxi build playground", "docs": "cd docs && yarn dev", - "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground", + "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground", "release": "yarn run lint && yarn run test && yarn run prepack && changelogen --release --output=CHANGELOG.md && yarn publish && git push --follow-tags", "lint": "eslint .", "test": "vitest run", @@ -48,14 +48,14 @@ "stackblitz": "cd .stackblitz && yarn && yarn dev" }, "dependencies": { - "@cloudinary-util/url-loader": "^3.10.0", + "@cloudinary-util/url-loader": "^3.23.0", "@nuxt/kit": "^3.5.0", "@unpic/vue": "^0.0.23", "defu": "^6.1.2" }, "devDependencies": { "@nuxt/eslint-config": "^0.1.1", - "@nuxt/module-builder": "^0.3.1", + "@nuxt/module-builder": "^0.5.4", "@nuxt/schema": "^3.5.0", "@nuxt/test-utils": "^3.5.0", "changelogen": "^0.4.1", diff --git a/playground/app.vue b/playground/app.vue index 8ccfecb..6758447 100644 --- a/playground/app.vue +++ b/playground/app.vue @@ -9,17 +9,28 @@ const mediaAssets = [ { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" }, ]; -const buttonId = 'open-btn' +const buttonId = "open-btn"; + +const cldVideoRef = ref();