Images

Images have special properties that can be used when displaying them using their URL path. These templates can change the size and even the shape of the image. They are used by adding "?tpl=" to the end of the path.

The path can be found in the Image JSON Metadata:

"image": {
"path": "/blob/d2cuLg.cCY6PPQHMOg/puppies.jpg",
"name": "puppies.jpg",
"type": "image",
"size": 1914937,
"mime": "image/jpeg",
"meta": {
"width": 5184,
"height": 3888
}
}

For example: "https://x838-9e23-328e.qa.xano.io/blob/d2cuLg.cCY6PPQHMOg/puppies.jpg?tpl=tiny". Let's start with the smallest and work our way up:

The first is ?tpl=tiny: The original image aspect ratio is preserved using a width of 32.

?tpl=small: The original image aspect ratio is preserved using a width of 50.

?tpl=med: The original image aspect ratio is preserved using a width of 160.

?tpl=big: The original image aspect ratio is preserved using a width of 360.

?tpl=large: The original image aspect ratio is preserved using a width of 800.

?tpl=xlarge: The original image aspect ratio is preserved using a width of 1920.

Shape: Box To change the shape of the image to a square you can add ":box" to the end.

For example: "www.demoimage.jpg?tpl=big:box".

?tpl=big:box The original image is transformed into using a 360 x 360 square.

?tpl=tiny:box The original image is transformed into using a 32 x 32 square.

?tpl=small:box The original image is transformed into using a 50 x 50 square.

?tpl=med:box The original image is transformed into using a 160 x 160 square.

?tpl=large:box The original image is transformed into using a 800 x 800 square.

?tpl=xlarge:box The original image is transformed into using a 1920 x 1920 square.