Image-scaling

Documentation for the image scaling endpoint

Neleto has an endpoint which automatically scales images to the requested size and caches them for future requests. This endpoint is available on /images/user-upload/<file-id>?options=<options>.

This endpoint can be easily used in component templates with the image_path function:

{{image_path(file, "s_100,f_webp")}}

where file is a file object from the relations property. A more complete example:

{{#if relations.file as file}}
    <img src="{{image_path(file, "s_100,f_webp")}}" alt="{{file.title}}">
{{/if}}

This will produce an image with 100px width by 100px height in the webp format.

Options

Options are separated by a comma and are in the following format:

<option-name>_<option-value>

where <option-name> is a single letter and <option-value> depends on the option.

If there is a parsing error, meaning the value is not the format the option expects, the parsing of all the options will be aborted.

The options are applied in the order they are given, but format and quality options will be applied last. For example:

?options=f_webp,s_100,q_80

will first scale the image to 100px width and height, and since there are no other options except for format and quality, it will be converted to webp. The quality option will be ignored, since it only works with jpeg.

The following options are available:

Size

Set the width and height of the image to the same value in pixels.

Examples

?options=s_100

?options=s_300

Height

Set the height of the image in pixels.

Examples

?options=h_100

?options=h_300,w_100

Width

Set the width of the image in pixels.

Examples

?options=w_100

?options=w_200,h_100

Format

Set the output format of the image. Available values:

webp
jpeg
png
avif
gif

Examples

?options=f_webp

Quality

Set the quality for the output format. Only works with jpeg.

This option is only available when format is set to jpeg. Otherwise it will be ignored.

Examples

?options=q_80,f_jpeg

Extract

Extract a section of the image. Similar to a crop. This argument is always 4 numbers, separated by _, in the following order: top, left, width, height. The unit is pixels.

Examples

?options=e_10_10_200_200

?options=e_0_0_100_100

Fit

Set the fit mode for the image. Only works when size, width or height is set. Available values:

contain or inside

The image will be scaled to be completely visible inside the specified size. This can result in borders, since the aspect ratio is kept.

cover or outside

The image will be scaled to fill the specified size. The aspect ratio will be kept, so that parts of the image may not be visible at the edges.

fill

The image will be scaled without keeping the aspect ratio, so that the entire size is filled. This can cause the image to be stretched.

This option is only available when size, width or height is set.

Examples

?options=s_100,f_contain

?options=s_500,f_cover