feat-#230: dynamic crop

docs/components/content/ImageWithCrop.vue

@@ -0,0 +1,14 @@
+<template>
+  <CldImage
+    src="cld-sample-5"
+    width="987"
+    height="987"
+    alt="Sample Product"
+    :crop="{
+      type: 'thumb',
+      width: 600,
+      height: 600,
+      source: true,
+    }"
+  />
+</template>

docs/content/2.components/CldImage/3.examples.md

@@ -54,6 +54,21 @@ crop
 
 :cld-image{src="images/woman-headphones" width="1200" height="1200" alt="test" crop="thumb" style="text-align: center; margin: 0 auto"}
 
+Cloudinary additionally supports dynamic crop modes like thumb that may provide a different result based on the given width and height. To help provide more options for controlling cropping images, you can specify and object or array of objects.
+
+For instance, to crop the original source image, which will then later resize it to the initial width and height, you can use:
+
+```html
+:crop="{
+  type: 'thumb',
+  width: 600,
+  height: 600,
+  source: true,
+}"
+```
+
+:image-with-crop{style="text-align: center; margin: 0 auto"}
+
 #### Fill
 
 `fillBackground`: Fills the background of an image using Generative AI

playground/app.vue

@@ -121,7 +121,12 @@ const onError = (
     width="987"
     height="987"
     alt="Sample Product"
-    crop="fill"
+    :crop="{
+      type: 'thumb',
+      width: 600,
+      height: 600,
+      source: true,
+    }"
     :overlays="[
       {
         position: {