Image Engine
Resize / Apply Filters / Watermark / Crop / More
You can use Tuned Global’s automatic image resizing end-point in order to generate images in the size you wish. The system will resize from the original image automatically. In order to use and access these images, you will need to first get the Thumbor settings from the TUNED APIs or TUNED directly.
The standard URL for Thumbor is provided below in the example, if you have custom URLs configured this may change.
In order to get an image., you can then add the Thumbor URL ahead of the image URL (available from the APIs) along with the parameters to resize the image.
An image example is here: https://dxfve6m7pg0pq.cloudfront.net/unsafe/420x420/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20220222_1307.jpg
- Yellow = Thumbor URL
- Fixed URL - this is provided to you by Tuned Global Use this for all your thumbor requests
- Orange = request parameters
- Detailed below
- Green = image information returned in the GetImageURL
- Note that the API will return the full URL to the image. In the example above this would be: https://d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20220222_1307.jpg
- This image will be the full sized image delivered by the label (format may be converted)
- Exclude the https:// component and use the remainder in your Thumbor request.
Exclude the https:// component and use the remainder your Thumbor request. You must build your URL to request an image suitable for your application. Below is a Basic model, for a quick start. There is also an Advanced section if you want to customise and optimise the images being retrieved. BASIC To simply ask for a resized image, simply specify the size of the image as follows; [Thumbor URL]/unsafe/[image size]/[image URL returned in API] Image size is defines in pixels width x height
Example: [Thumbor URL]= https://dxfve6m7pg0pq.cloudfront.net/ unsafe/[image size]= unsafe/ [image URL returned in API]= d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20220222_1307.jpg
Full URL: https://dxfve6m7pg0pq.cloudfront.net/unsafe/420x1420/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20220222_1307.jpg Note: This example is the same as Crop in Advanced below. It is NOT a proportional resize but will crop the image as defined below. If you wish to proportionally resize you should use Fit
ADVANCED
- Re-Size - Define the width and height you wish the image to be resized to, within the parameters below;
- Crop If you do not specify to fit an image within a container, the image will be resized to the largest dimension (w or h) and then cropped to the smallest dimension.
- Eg. Below the same image is set to size 420x1420
- Notes:
- The image is now 1420 high and cropped to the centre 420
- If either dimension number is negative, the image will be flipped horizontally or vertically
- Fit Use the fit-in parameter to ensure an images first into a container with no cropping. The example URL is https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/420x420/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20220222_1307.jpg The image will be scaled proportionally to fit into the smallest dimension (w or h)
- Eg. Below the same image is set to size 420x1420
- Notes:
- The image retains its proportions and full image (no crop) but is resized to its lowest dimension being 420
- If either dimension number is negative, the image will be flipped horizontally or vertically
- Filters You can specify multiple filters within a request. Some examples are below. You can specify more than one filter separated by a colon.
- Quality Quality is measured from 1-100, higher being better. You may want to experiment with qualities to ensure that your users experience is optimal (and fast). We recommend a quality setting of 70 as being a good compromise between quality and size.
- Brightness and Contrast Adjust the brightness and contract for a specific effect in your application. Both are measured for from -100 to 100
- Format Define if you want to force a format. The system will normally return a jpeg file, but depending on the original format it may at times return a png. A JPEG will deliver the smallest file size and hence is recommended.
- format(jpeg) or format(png)
- Watermark Define if you wish to use a watermark over your images.
- You can define location, opacity and more
- Usage: watermark(imageUrl, x, y, alpha [, w_ratio [, h_ratio]])
- Description This filter adds a watermark to the image. It can be positioned inside the image with the alpha channel specified and optionally resized based on the image size by specifying the ratio (see Resizing).
- Arguments imageUrl - Watermark image URL. It is very important to understand that the same image loader that Thumbor uses will be used here. If this URL contains parentheses they MUST be url encoded, since these are the characters Thumbor uses as delimiters for filter parameters. x - Horizontal position that the watermark will be in. Positive numbers indicate position from the left and negative numbers indicate position from the right. If the value is ‘center’ (without the single quotes), the watermark will be centered horizontally. If the value is ‘repeat’ (without the single quotes), the watermark will be repeated horizontally. If the value is a positive or negative number followed by a ‘p’ (ex. 20p) it will calculate the value from the image width as percentage y - Vertical position that the watermark will be in. Positive numbers indicate position from the top and negative numbers indicate position from the bottom. If the value is ‘center’ (without the single quotes), the watermark will be centered vertically. If the value is ‘repeat’ (without the single quotes), the watermark will be repeated vertically If the value is a positive or negative number followed by a ‘p’ (ex. 20p) it will calculate the value from the image height as percentage alpha - Watermark image transparency. Should be a number between 0 (fully opaque) and 100 (fully transparent). w_ratio - percentage of the width of the image the watermark should fit-in, defaults to ‘none’ (without the single quotes) which means it won’t be limited in the width on resizing but also won’t be resized based on this value h_ratio - percentage of the height of the image the watermark should fit-in, defaults to ‘none’ (without the single quotes) which means it won’t be limited in the height on resizing but also won’t be resized based on this value
- Example:
- Speak to Tuned Global about your specific needs as further filters are available (eg. Blur, Saturation and more)
On this page
- Image Engine