URL API implementation
Direct implementation using the Cloudimage URL API
If your Web application does not use a CMS (Wordpress, Drupal, ...), e-commerce platform (Prestashop, Magento, ...), or development framework (React, Angular, Django, ...), then you need to adapt your image URLs in your HTML <img>
tags.
Basic usage
For example, if your origin image is available at the following URL::
http://sample.li/flat.jpg
Then you need to adapt it to be:
//token.cloudimg.io/http://sample.li/flat.jpg?operations&filters&watermarks
Where:
token: your Cloudimage token you obtain after registering for a Cloudimage account;
operations: the resizing operation(s) as listed under Image operations;
filters: the filter transformation(s) as listed under Image filters;
watermarks: any image or text overlay(s) as listed under Image watermarking.
In your code, this URL can be used as a normal image in your <img>
elements:
If you have implemented responsive design with the HTML <picture>
and <srcset>
elements, then you need to change every <srcset>
:
Becomes:
Url-encoding resource URL
ci_url_encoded=1
If a resource is versioned or dynamically generated using query strings, or the filename contains unsupported or reserved characters, you will need to url-encode the URL of the resource. In this case, you need to add the ci_url_encoded=1 parameter to the Cloudimage URL.
For example, in the origin below, the ?w=22 query string is part of the static resource (origin image):
To construct a Cloudimage URL from it, the resource is URL-encoded and the width operation can be now used correctly:
Spaces in the filename
When using ci_url_encoded=1 to encode URLs with space in the filename, please consider the example: Image: https://freeaccessdemo.blob.core.windows.net/myfiles/Image with space in the name.jpg
Need to be encoded according to RFC-3986 (percent-encoding):
And if for example, we have extra values added to the origin resource like v=13, the final Cloudimage URL will look like this:
The following approach can be used in this case:
Last updated
Was this helpful?