Image
Overlays
Image Overlay Transformations
Overlays allow you to add text or images on top of your base image. They’re perfect for watermarks, branding, captions, and dynamic content composition.
Types of Overlays
Text Overlays
Add text to your images using the l_text
parameter with various styling options:
Text Parameters
l_font_{name}
: Font family (e.g., Arial, Helvetica)l_size_{pixels}
: Font size in pixelsl_color_{hex}
: Text color in hex formatl_gravity_{position}
: Text placement (see Positioning section)l_x_{pixels}
: X-axis offset from gravity positionl_y_{pixels}
: Y-axis offset from gravity positionl_o_{opacity}
: Text opacity (0-100)
Image Overlays
Add images on top of your base image using the l_image
parameter:
Note: Replace forward slashes (/) in image paths with
@@
Example:assets/brand/logo.png
becomesassets@@brand@@logo.png
Image Overlay Parameters
l_gravity_{position}
: Overlay placementl_x_{pixels}
: X-axis offsetl_y_{pixels}
: Y-axis offsetl_o_{opacity}
: Overlay opacity (0-100)l_scale_{factor}
: Scale factor (e.g., 0.5 for half size)l_width_{pixels}
: Specific widthl_height_{pixels}
: Specific heightl_ar_{ratio}
: Aspect ratio
Positioning (Gravity)
Control overlay placement using the l_gravity
parameter:
Standard Positions
center
(default)north
,south
,east
,west
north_east
,north_west
,south_east
,south_west
Fine-tuning
Combine gravity with x/y offsets for precise positioning: