Using an Overlay
Add an image on top of your imageParameters to configure an overlay are:
| param | name | default | description |
|---|---|---|---|
| u | url | Required, the url of the image to overlay | |
| o | offset | northwest,0,0 | Choose a snapping point, and additional coordinate offsets from the base image’s border |
| w | width | If no height supplied, defaults to 120px |
width of the image to overlay |
| h | height | height of the image to overlay |
This is a complex parameter, where it will contain multiple settings within the overlay parameter value.
Where a querystring is composed of parameters name and value separated by = and parameters put together by &, an ixmage complex parameter follows this syntax: name and value are separated by a colon : and parameters are mashed together by a star *.
Using this image as base:
https://cdn.ixmage.com/v2/grappler/images/demo/colors.jpg?w=600
We are going to overlay this image:
https://cdn.ixmage.com/v2/grappler/images/demo/game-character.png?w=150
Using the overlay command
https://cdn.ixmage.com/v2/grappler/images/demo/colors.jpg?w=600&overlay=u:https://cdn.ixmage.com/v2/grappler/images/demo/game-character.png*w:150
Note how we used colon : to separate u from the url and a star * to separate u from w
We used the following parameters to configure the overlay command.
| param | value | information |
|---|---|---|
| u | url |
Specify the game-character image url |
| w | 150 |
Give the overlay a width of 150 pixels |
| h | The height is calculated to preserve aspect-ratio |
The position o defaulted to northwest,0,0. So let’s move the overlay and position it as if it were standing on the floor and not on top of the ladder…
Let’s snap it to the bottom-left corner with southwest and then separate it from the corner some 50 pixels to the right, and 25 pixels up…
| param | value | information |
|---|---|---|
| o | southwest,50,25 |
snap to the bottom-left corner, shift 50 pixels right, and 25 pixels up. |
*o:southwest,50,25
https://cdn.ixmage.com/v2/grappler/images/demo/colors.jpg?w=600&overlay=u:https://cdn.ixmage.com/v2/grappler/images/demo/game-character.png*w:150*o:southwest,50,25