From 20e3b3cd3a915bdbab9f34b4854d1108efe6d43f Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Mon, 18 Dec 2023 08:52:42 +0530 Subject: [PATCH 1/5] updated overlay syntax --- README.md | 38 +++----------------------------------- 1 file changed, 3 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 9f3b2ee..5bf8ce0 100644 --- a/README.md +++ b/README.md @@ -363,7 +363,7 @@ https://ik.imagekit.io/your_imagekit_id/tr:q-40/default-image.jpg ``` ### 5. Adding overlays to images -ImageKit.io allows overlaying [images](https://docs.imagekit.io/features/image-transformations/overlay#image-overlay) or [text](https://docs.imagekit.io/features/image-transformations/overlay#text-overlay) over other images and videos for watermarking or creating dynamic assets using custom text. +ImageKit.io allows overlaying [text](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-text-over-image) or [image](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-images-over-image) over other images and videos for watermarking or creating dynamic assets using custom text. #### Example ```php @@ -376,17 +376,14 @@ $imageURL = $imageKit->url(array( [ 'height' => '300', 'width' => '300', - 'overlayImage' => 'default-image.jpg', - 'overlaywidth' => '100', - 'overlayX' => '0', - 'overlayImageBorder' => '10_CDDC39' // 10px border of color CDDC39 + 'raw': "l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end" ] ] )); ``` #### Response ``` -https://ik.imagekit.io/your_imagekit_id/endpoint/tr:w-300,h-300,oi-default-image.jpg,ow-100,ox-0,oib-10_CDDC39/default-image.jpg +https://ik.imagekit.io/your_imagekit_id/endpoint/tr:w-300,h-300,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end/default-image.jpg ``` ### 6. Signed URL @@ -445,35 +442,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 | -| overlayImageTrim | oit | -| 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 | From 451e8449e534feb116b1e0ed764760d5696343b3 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 07:06:35 +0530 Subject: [PATCH 2/5] updated readme.md --- README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 62 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5bf8ce0..55c666f 100644 --- a/README.md +++ b/README.md @@ -362,28 +362,83 @@ $imageURL = $imageKit->url(array( https://ik.imagekit.io/your_imagekit_id/tr:q-40/default-image.jpg ``` -### 5. Adding overlays to images -ImageKit.io allows overlaying [text](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-text-over-image) or [image](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-images-over-image) over other images and videos for watermarking or creating dynamic assets using custom text. +### 5. 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: + +```php +$imageURL = $imageKit->url(array( + 'path' => '/default-image.jpg', + 'urlEndpoint' => 'https://ik.imagekit.io/your_imagekit_id' + + '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: -#### Example ```php $imageURL = $imageKit->url(array( 'path' => '/default-image.jpg', 'urlEndpoint' => 'https://ik.imagekit.io/your_imagekit_id' - // It means first resize the image to 400x300 and then rotate 90 degree 'transformation' => [ [ 'height' => '300', - 'width' => '300', + 'width' => '400', 'raw': "l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end" ] ] )); ``` -#### Response +#### 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: + +```php +$imageURL = $imageKit->url(array( + 'path' => '/img/sample-video.mp4', + 'urlEndpoint' => 'https://ik.imagekit.io/your_imagekit_id' + + '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/endpoint/tr:w-300,h-300,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end/default-image.jpg +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 ``` ### 6. Signed URL From 9a64be6c3ee593782a8196a964869915f0eb850f Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 07:09:58 +0530 Subject: [PATCH 3/5] updated readme.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 55c666f..b1423ce 100644 --- a/README.md +++ b/README.md @@ -252,7 +252,7 @@ This section covers the basics: * [Image enhancement & color manipulation](#2-image-enhancement-and-color-manipulation) * [Resizing images and videos](#3-resizing-images-and-videos) * [Quality manipulation](#4-quality-manipulation) -* [Adding overlays to images](#5-adding-overlays-to-images) +* [Adding overlays](#5-adding-overlays) * [Signed URL](#6-signed-url) The PHP SDK gives a name to each transformation parameter e.g. `height` for `h` and `width` for `w` parameter. It makes your code more readable. See the [Full list of supported transformations](#list-of-supported-transformations). From ced502b95b21b65a31827e0c5fbcabd0525b3ae1 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 07:25:26 +0530 Subject: [PATCH 4/5] updated readme.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b1423ce..ead0eb0 100644 --- a/README.md +++ b/README.md @@ -362,11 +362,11 @@ $imageURL = $imageKit->url(array( https://ik.imagekit.io/your_imagekit_id/tr:q-40/default-image.jpg ``` -### 5. Adding overlays +#### 5. 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 +##### Text as overlays You can add any text string over a base video or image using a text layer (l-text). @@ -386,12 +386,12 @@ $imageURL = $imageKit->url(array( ] )); ``` -#### Sample Result URL +##### 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 +##### Image as overlays You can add an image over a base video or image using an image layer (l-image). @@ -411,12 +411,12 @@ $imageURL = $imageKit->url(array( ] )); ``` -#### Sample Result URL +##### 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 +##### Solid color blocks as overlays You can add solid color blocks over a base video or image using an image layer (l-image). @@ -436,7 +436,7 @@ $imageURL = $imageKit->url(array( ] )); ``` -#### Sample Result URL +##### 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 ``` From f4bb9473132a802325f1e49ea293e2b599692a10 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 07:26:28 +0530 Subject: [PATCH 5/5] updated readme.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index ead0eb0..b1423ce 100644 --- a/README.md +++ b/README.md @@ -362,11 +362,11 @@ $imageURL = $imageKit->url(array( https://ik.imagekit.io/your_imagekit_id/tr:q-40/default-image.jpg ``` -#### 5. Adding overlays +### 5. 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 +#### Text as overlays You can add any text string over a base video or image using a text layer (l-text). @@ -386,12 +386,12 @@ $imageURL = $imageKit->url(array( ] )); ``` -##### Sample Result URL +#### 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 +#### Image as overlays You can add an image over a base video or image using an image layer (l-image). @@ -411,12 +411,12 @@ $imageURL = $imageKit->url(array( ] )); ``` -##### Sample Result URL +#### 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 +#### Solid color blocks as overlays You can add solid color blocks over a base video or image using an image layer (l-image). @@ -436,7 +436,7 @@ $imageURL = $imageKit->url(array( ] )); ``` -##### Sample Result URL +#### 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 ```