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

update readme.md

README.md

@@ -236,8 +236,8 @@ In order to use the SDK, you need to provide it with a few configuration paramet
 
 ```js
 <IKContext
-  :publicKey="your_url_endpoint"
-  :urlEndpoint="your_public_api_key"
+  :publicKey="your_public_api_key"
+  :urlEndpoint="your_url_endpoint"
   :authenticator={()=>Promise} 
   // This promise  resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`.
 >
@@ -318,14 +318,64 @@ transformation = [
 
 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.
 
-<br/>
+### Adding overlays
 
-> #### Deprecation notice
-> The list below mentions the old overlay syntax parameters such as `oi`, `ot`, `obg`, and more. These parameters will be deprecated on 31st Oct 2023 and will start returning errors when used in URLs. Please migrate to the new Layers syntax that supports overlay nesting, provides better positional control, and allows more transformations at the layer level. You can start with [examples](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#examples) to learn quickly.
-> If you create overlay transformations using the JavaScript SDK, you can migrate to the new Layers syntax using the `raw` transformation parameter, as given in the example below.
-> `transformation = [{ "width": 300, "height": 300 },{ "raw": "l-image,i-logo.png,w-10,rt-90,l-end" }]`
+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:
+
+```js
+<IKImage
+    path="/default-image.jpg"
+    urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/"
+    :transformation="[{ "width": 400, "height": 300, "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:
+
+```js
+<IKImage
+    path="/default-image.jpg"
+    urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/"
+    :transformation="[{ "width": 400, "height": 300, "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:
+
+```js
+<IKVideo
+    path="/img/sample-video.mp4"
+    urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/"
+    :transformation="[{ "width": 400, "height": 300, "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
+```
 
-<br/>
 
 ### List of supported transformations
 <details>
@@ -349,34 +399,6 @@ See the complete list of transformations supported in ImageKit [here](https://do
 | rotation | rt |
 | blur | bl |
 | named | n |
-| overlayX | ox |
-| overlayY | oy |
-| overlayFocus | ofo |
-| overlayHeight | oh |
-| overlayWidth | ow |
-| overlayImage | oi |
-| overlayImageTrim | oit |
-| overlayImageAspectRatio | oiar |
-| overlayImageBackground | oibg |
-| overlayImageBorder | oib |
-| overlayImageDPR | oidpr |
-| overlayImageQuality | oiq |
-| overlayImageCropping | oic |
-| 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 |