Merge pull request #4 from imagekit-developer/update-overlay-syntax

update overlay syntax
imagekit-developer · Dec 21, 2023 · 557eb49 · 557eb49
2 parents 2e64325 + c5c093e
commit 557eb49
Showing 1 changed file with 76 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -199,6 +199,82 @@ params := ikurl.UrlParam{
     },
 }
 ```
+
+**3. Adding overlays**
+
+ImageKit.io enables you to apply overlays to [images](https://docs.imagekit.io/features/image-transformations/overlay-using-layers) and [videos](https://docs.imagekit.io/features/video-transformation/overlay) using the raw parameter with the concept of [layers](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#layers). The raw parameter facilitates incorporating transformations directly in the URL. A layer is a distinct type of transformation that allows you to define an asset to serve as an overlay, along with its positioning and additional transformations.
+
+**Text as overlays**
+
+You can add any text string over a base video or image using a text layer (l-text).
+
+For example:
+
+```go
+params := ikurl.UrlParam{
+    Path:        "default-image.jpg",
+    UrlEndpoint: "https://ik.imagekit.io/demo-id/",
+    Transformations: []map[string]any{
+        {
+            "height": 300,
+            "width":  400,
+            "raw": "l-text,i-Imagekit,fs-50,l-end"
+        },
+    },
+}
+```
+**Sample Result URL**
+```
+https://ik.imagekit.io/demo-id/default-image.jpg?tr=h-300,w-400,l-text,i-Imagekit,fs-50,l-end
+```
+
+**Image as overlays**
+
+You can add an image over a base video or image using an image layer (l-image).
+
+For example:
+
+```go
+params := ikurl.UrlParam{
+    Path:        "default-image.jpg",
+    UrlEndpoint: "https://ik.imagekit.io/demo-id/",
+    Transformations: []map[string]any{
+        {
+            "height": 300,
+            "width":  400,
+            "raw": "l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end"
+        },
+    },
+}
+```
+**Sample Result URL**
+```
+https://ik.imagekit.io/demo-id/default-image.jpg?tr=h-300,w-400,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end
+```
+
+**Solid color blocks as overlays**
+
+You can add solid color blocks over a base video or image using an image layer (l-image).
+
+For example:
+
+```go
+params := ikurl.UrlParam{
+    Path:        "img/sample-video.mp4",
+    UrlEndpoint: "https://ik.imagekit.io/demo-id/",
+    Transformations: []map[string]any{
+        {
+            "height": 300,
+            "width":  400,
+            "raw": "l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end"
+        },
+    },
+}
+```
+**Sample Result URL**
+```
+https://ik.imagekit.io/demo-id/img/sample-video.mp4?tr=h-300,w-400,l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end
+```
 #### List of supported transformations
 
 See the complete list of transformations supported in ImageKit [here](https://docs.imagekit.io/features/image-transformations). The SDK gives a name to each transformation parameter e.g. `height` for `h` and `width` for `w` parameter. It makes your code more readable. If the property does not match any of the following supported options, it is added as it is.
@@ -225,38 +301,6 @@ If you want to generate transformations in your application and add them to the
 |rotation                  |rt|
 |blur                      |bl|
 |named                     |n|
-|overlayX                  |ox|
-|overlayY                  |oy|
-|overlayFocus              |ofo|
-|overlayHeight             |oh|
-|overlayWidth              |ow|
-|overlayImage              |oi|
-|overlayImageX             |oix|
-|overlayImageY             |oiy|
-|overlayImageXc            |oixc|
-|overlayImageYc            |oiyc|
-|overlayImageAspectRatio   |oiar|
-|overlayImageBackground    |oibg|
-|overlayImageBorder        |oib|
-|overlayImageDPR           |oidpr|
-|overlayImageQuality       |oiq|
-|overlayImageCropping      |oic|
-|overlayImageFocus         |oifo|
-|overlayImageTrim          |oit|
-|overlayText               |ot|
-|overlayTextFontSize       |ots|
-|overlayTextFontFamily     |otf|
-|overlayTextColor          |otc|
-|overlayTextTransparency   |oa|
-|overlayAlpha              |oa|
-|overlayTextTypography     |ott|
-|overlayBackground         |obg|
-|overlayTextEncoded        |ote|
-|overlayTextWidth          |otw|
-|overlayTextBackground     |otbg|
-|overlayTextPadding        |otp|
-|overlayTextInnerAlignment |otia|
-|overlayRadius             |or|
 |progressive               |pr|
 |lossless                  |lo|
 |trim                      |t|