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

Update overlay syntax

Author: imagekitio

README.md

@@ -222,6 +222,76 @@ Sample Result URL -
 https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400/default-image.jpg?p1=123&p2=345&ik-t=1658899345&ik-s=8f03aca28432d4e87f697a48143efb4497bbed9e
 ```
 
+**4. 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:
+
+```python
+image_url = imagekit.url({
+    "path": "/default-image",
+    "url_endpoint": "https://ik.imagekit.io/your_imagekit_id/endpoint/",
+    "transformation": [{
+        "height": "300",
+        "width": "400",
+        "raw": "l-text,i-Imagekit,fs-50,l-end"
+    }],
+})
+```
+**Sample Result URL**
+```
+https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-text,i-Imagekit,fs-50,l-end/default-image.jpg
+```
+
+**Image as overlays**
+
+You can add an image over a base video or image using an image layer (l-image).
+
+For example:
+
+```python
+image_url = imagekit.url({
+    "path": "/default-image",
+    "url_endpoint": "https://ik.imagekit.io/your_imagekit_id/endpoint/",
+    "transformation": [{
+        "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/your_imagekit_id/tr:h-300,w-400,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end/default-image.jpg
+```
+
+**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:
+
+```python
+image_url = imagekit.url({
+    "path": "/img/sample-video",
+    "url_endpoint": "https://ik.imagekit.io/your_imagekit_id/endpoint/",
+    "transformation": [{
+        "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/your_imagekit_id/tr:h-300,w-400,l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end/img/sample-video.mp4
+```
+
 **List of transformations**
 
 The complete list of transformations supported and their usage in ImageKit is available [here](https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations).
@@ -247,34 +317,6 @@ If you want to generate transformations in your application and add them to the
 | rotation                      | rt                              |
 | blur                          | bl                              |
 | named                         | n                               |
-| overlay_x                     | ox                              |
-| overlay_y                     | oy                              |
-| overlay_focus                 | ofo                             |
-| overlay_height                | oh                              |
-| overlay_width                 | ow                              |
-| overlay_image                 | oi                              |
-| overlay_image_trim            | oit                             |
-| overlay_image_aspect_ratio    | oiar                            |
-| overlay_image_background      | oibg                            |
-| overlay_image_border          | oib                             |
-| overlay_image_dpr             | oidpr                           |
-| overlay_image_quality         | oiq                             |
-| overlay_image_cropping        | oic                             |
-| overlay_image_focus           | oifo                            |
-| overlay_text                  | ot                              |
-| overlay_text_font_size        | ots                             |
-| overlay_text_font_family      | otf                             |
-| overlay_text_color            | otc                             |
-| overlay_text_transparency     | oa                              |
-| overlay_alpha                 | oa                              |
-| overlay_text_typography       | ott                             |
-| overlay_background            | obg                             |
-| overlay_text_encoded          | ote                             |
-| overlay_text_width            | otw                             |
-| overlay_text_background       | otbg                            |
-| overlay_text_padding          | otp                             |
-| overlay_text_inner_alignment  | otia                            |
-| overlay_radius                | or                              |
 | progressive                   | pr                              |
 | lossless                      | lo                              |
 | trim                          | t                               |