Watermarking and Overlays
Front.Space offers a professional solution that enables you to effortlessly incorporate multiple layers of images and videos into specific coordinates within your images and videos. These new layers act as overlays and can be seamlessly adjusted to meet your requirements. Whether it's adding an image uploaded to Front.Space, a remote image, or a text string, there are several options available to add a new layer to your base image. Additionally, you have the flexibility to use image layers as underlays and leverage special layer applications to enhance your visuals in conjunction with other Front.Space transformations.
Watermarking images is a crucial practice in the digital industry. It allows individuals and businesses to protect their intellectual property by adding a visible marker to their images. This serves as a unique identifier, making it difficult for others to claim ownership or misuse the images without permission. With the increasing prevalence of image theft and unauthorized usage, watermarking proves to be an essential tool in safeguarding digital assets and maintaining credibility in the industry.
We will be using l (layer) parameter to apply watermarks as an overlay to the images.
Parameter Syntax: l_<origin_name:watermark_media_path> Watermarks an image or a video on the base image or video.
Optional Qualifiers:
bo (border) | du (duration) | fl_relative (relative layer) | g (gravity) | h (height) | so (start offset) | w (width) | x, y (x & y coordinates)
Syntax Details:
Value | Type | Description |
origin_name:media_path | string | Required. origin_name: the Origin name set in the Origins where the image/video to be added as watermark is uploaded. watermark_media_path: The public path of the uploaded image or video to add as a Watermark. |
Example: l_demo-origin:front_space_logo.png will select the front_space_logo.png image as a watermark overlay layer defined at the origin named as demo-origin. You can then choose to define the coordinates of the watermark using g (gravity), x and y parameters as done in the example below:
💡 Tip: Front.Space offers a highly efficient solution to seamlessly add watermarks to millions of your images without the need for individual editing, while ensuring the integrity of your original image. This grants you the flexibility to easily modify the watermark across all images in the event of a logo or asset transformation.
Other API References: g (gravity) | x, y (x & y coordinates) | l (layer) | fl_relative (relative layer) | h (height) | w (width)
You can change the position of the watermark on your base image using the g (gravity) parameter accompanied by x and y parameters for deciding the spacing from the defined corner.
For Example:
You can change the Relative Size of the watermark on your base image using the fl_relative parameter accompanied by the w (width) parameter with relative size varying from 0.01 (1% of the Base Image) to 1 (100% Size of the Base Image) parameters for deciding the spacing from the defined corner.
For Example:
You may change the opacity of your watermark by using o (opacity) parameter accompanied by the percentage of opacity ranging from 1 to 100 in the URL Transformation.
For Example:
Front.Space provides the capability to enhance your images by incorporating image overlays of multiple layers. This feature allows you to take your images to the next level by adding visual elements that complement and enhance the original image.
For Example:
Other API References: g (gravity) | x, y (x & y coordinates) | l (layer) | fl_relative (relative layer) | h (height) | w (width)
Front.Space offers a fantastic solution for enhancing your images with text overlays of multiple layers. This powerful feature enables you to elevate your images by seamlessly integrating visually appealing elements that perfectly complement and enhance the original content.
Parameter: l_text:<Text Style>:<Text String> Adds a text overlay to an image or video.
You can customise the dimensions and position of the overlay with the w (width), h (height), x, y (x & y coordinates) and g (gravity) parameters with the overlay transformation.
For example, You may add text to your images using the following URL Transformation
2. You can apply text overlays in a vertical fashion on any part of the image using a (angle) parameter in the following URL Transformation:
Other API References: g (gravity) | x, y (x & y coordinates) | l (layer) | co (color) | h (height) | w (width) | c_lpad | a (angle) | b (background)
Multiple overlays can easily be added as chained transformations to an asset. In the following example, both an image and a text overlay are added to the base image using the specified properties:
- An overlay of an image called "emoji_smiling.png". The image is accompanied by the text "Smiley Cat" in Black color at the bottom west corner of the image with spacing from corners of 50 pixels and a padding background of orange color, rounded at the edges for better aesthetics.
- An overlay of an image called "front_space_logo" is added to the above image at the southeast direction with 50 pixels of spacing both from the southern and eastern edges. The image has a relative width of 10% of the base image.
- Develop an e-commerce Product Catalog by Removing the Background of the stock photo, placing it over a podium in the given background image and further adding the Category Name on a vertical strip with background color.
Other API References: g (gravity) | x, y (x & y coordinates) | l (layer) | co (color) | h (height) | w (width) | c_lpad | a (angle) | b (background) | l_text (Text Overlay) | fl (flag)