Layers and text

The Media Delivery API lets you overlay images and text onto a base asset. Layer 0 is always the base and further layers are added on top using indexed parameters, each with its own source, position, anchor, opacity, and visibility.

Base URL pattern

The parameters on this page are appended to a Dynamic Media image URL. For the URL pattern and how parameters chain together, see the Media Delivery API guide.

Layers

Layers allow multiple images to be composited together. Layer 0 is always the base image. Additional layers are applied on top using indexed parameters (layer1, layer2, etc.). Parameters for each layer are enclosed in square brackets [].

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel]

To apply parameters to the base image itself, address it as layer0:

https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer0=[w=800]&layer1=[src=/i//exampleRoundel&w=150]

src - Layer image source

The URL of the image for the specified layer. Starting the path with /i// reuses the account domain from the base URL.

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel]

Try it...

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel]

top, left, bottom, right - Layer position

Positions a layer relative to the previous layer. By default, layers are positioned in the top-left corner. Values can be pixels or percentages.

Combine with anchor for fine-grained control.

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&top=50%&left=50%]

Try it...

topDistance from top (px or %)

leftDistance from left (px or %)

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&top=50%&left=50%]

anchor - Layer anchor

Specifies which point of the layer aligns to the position coordinates. Use with top, left, bottom, right.

Value	Description
TL	Top left
TC	Top center
TR	Top right
ML	Middle left
MC	Middle center
MR	Middle right
BL	Bottom left
BC	Bottom center
BR	Bottom right

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&anchor=MC&top=50%&left=50%]

Try it...

topDistance from top (px or %)

leftDistance from left (px or %)

rightDistance from right (px or %)

bottomDistance from bottom (px or %)

anchorAnchor pointTLTCTRMLMCMRBLBCBR

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&anchor=MC&top=50%&left=50%]

opacity - Layer opacity

Sets the transparency of a layer. 0 is fully transparent; 100 is fully opaque.

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&opacity=50]

Try it...

opacityOpacity (0–100)

50

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&opacity=50]

visible - Layer visibility

Controls whether a layer is rendered. 0 is hidden; 1 is visible. Default is 1.

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&visible=0]

Try it...

visibleVisibility01

https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&visible=0]

canvas - Canvas layer

Creates a blank canvas of the specified dimensions onto which other layers can be drawn. Optionally specify a background colour with bg. Default background is white.

Format: canvas={width},{height}

https://cdn.media.amplience.net/i/ampproduct/?layer0=[canvas=700,400&bg=rgb(226,216,202)]&layer1=[src=/i//running-shoe&w=280&anchor=MC&top=50%&left=50%]&layer2=[src=/i//blue-roundel&w=110&anchor=TR&top=24&right=24]

Try it...

canvas_wCanvas width (px)

700

canvas_hCanvas height (px)

400

bgBackground colour

https://cdn.media.amplience.net/i/ampproduct/?layer0=[canvas=700,400&bg=rgb(226,216,202)]&layer1=[src=/i//running-shoe&w=280&anchor=MC&top=50%&left=50%]&layer2=[src=/i//blue-roundel&w=110&anchor=TR&top=24&right=24]

Text layers

Text can be rendered as a layer on top of an image.

Parameter	Values	Description
text	string	Text string to render. Use \n or %0A to insert a line break.
fontSize	integer (pt)	Font size in points. Default: 10.
fontFamily	string	Font family. Default: Helvetica. Falls back to Helvetica if the requested font is not installed.
fontStyle	normal, italic, oblique	Font style. Follows CSS font-style rules.
fontWeight	100–900 in multiples of 100, normal, bold	Text weight. normal = 400; bold = 700.
fontStretch	ultra-condensed … ultra-expanded	Widens or narrows text. Follows CSS font-stretch rules.
textColor	hex, rgb(), or named colour	Colour of the rendered text. Default: black.
textDecoration	underline, overline, linethrough	Decoration applied to the text.
textAlign	left, center, right	Alignment within the text layer (applies when text spans multiple lines). Default: left.

https://cdn.media.amplience.net/i/ampproduct/women-wearing-denim-small?layer1=[text=New%20denim%0AShop%20now&fontSize=48&textColor=white&textAlign=center&fontWeight=400]

Try it...

textText content

fontSizeFont size (pt)

48

textColorText color

fontWeightText weight. normal = 400. bold = 700.

400

textDecorationText decorationunderlineoverlinelinethrough

textAlignText alignmentleftcenterright

https://cdn.media.amplience.net/i/ampproduct/women-wearing-denim-small?layer1=[text=New%20denim%0AShop%20now&fontSize=48&textColor=white&textAlign=center&fontWeight=400]