From cd4a707e8ec0892f6774dd771f97e387651c0e3f Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Mon, 18 Dec 2023 08:35:54 +0530 Subject: [PATCH 1/3] add overlay syntax using layers --- README.md | 49 +++++++++++++++++++++---------------------------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 9fd33ff..680a835 100644 --- a/README.md +++ b/README.md @@ -282,6 +282,27 @@ image_url = imagekit.url({ https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400/default-image.jpg?v=123&ik-t=1567358667&ik-s=f2c7cdacbe7707b71a83d49cf1c6110e3d701054 ``` +**4. Adding overlays to images** + +ImageKit.io allows you to add [text](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-text-over-image) and [image overlay](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-images-over-image) dynamically. + +For example: + +```ruby +image_url = imagekit.url({ + path: "/default-image", + 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 +``` + **List of transformations** The complete list of transformations supported and their usage in ImageKit can be found [here](https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations). The SDK gives a name to each transformation parameter, making the code simpler, making the code simpler, and readable. @@ -308,34 +329,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 | -| 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 111d8f4c9df234e694b539ba673706d5a70ab6f6 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Mon, 18 Dec 2023 08:43:10 +0530 Subject: [PATCH 2/3] add overlay syntax using layers --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 680a835..2a808ad 100644 --- a/README.md +++ b/README.md @@ -291,6 +291,7 @@ For example: ```ruby image_url = imagekit.url({ path: "/default-image", + url_endpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/", transformation: [{ height: "300", width: "400", From a2c505da0f852230c52ffa1005af16cadb7b886c Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 08:31:25 +0530 Subject: [PATCH 3/3] update readme.md --- README.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2a808ad..62976b0 100644 --- a/README.md +++ b/README.md @@ -282,9 +282,35 @@ image_url = imagekit.url({ https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400/default-image.jpg?v=123&ik-t=1567358667&ik-s=f2c7cdacbe7707b71a83d49cf1c6110e3d701054 ``` -**4. Adding overlays to images** +**4. Adding overlays** -ImageKit.io allows you to add [text](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-text-over-image) and [image overlay](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-images-over-image) dynamically. +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: + +```ruby +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: @@ -304,6 +330,28 @@ image_url = imagekit.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: + +```ruby +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 can be found [here](https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations). The SDK gives a name to each transformation parameter, making the code simpler, making the code simpler, and readable.