Skip to main content

Detail section - how to use

Changing the image

The image can be modified by adding various parameters to the URL. Parameters are added with a '&' and always have the same structure.

For example

//yourdomain .com/fsi/server?type=image&source=images/samples/sample.jpg&width=300

normal SSI

This means that the image will be delivered with a width of 300 pixels.

Dimensions

For image requests, at least one of the parameters width or height must be provided. The value is interpreted in pixels and the result is an image scaled to fit the requested dimension.

Changing the width

The width of the image can be easily changed by modifying the width parameter. If you set the parameter to &width=200, the image will be 200 pixels wide:

//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=200

normal SSI with width defined

Changing Height

Height is defined in the same way as width. By adding &height=200 to the base URL, the image will be served with a height of 300px:

//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&height=200

normal SSI with height defined

Changing width & height at the same time

It's also possible to specify both width and height. By default, the aspect ratio is preserved, so if you specify both width and height, the resulting image may be smaller than the desired size, as the value closest to the aspect ratio is chosen. to the aspect ratio.

//yourdomain.com/fsi/server?type=image&source=images/samples/sample2.jpg&width=300&height=300

normal SSI with both width & height defined

We requested a square, so to ensure the aspect ratio, the image is delivered as 300x188.

This is calculated as follows: [INSERT FORMULA]

You can use the effect pad to ensure that the image is displayed in the desired dimensions while maintaining the aspect ratio. This may only be suitable for images with a solid background, as the gaps will be filled with a solid colour.

Image Format

With &format you can specify the format in which the image will be delivered. If you do not specify a format, the default is auto, which automatically chooses the best format depending on the browser. Alternatively you can select WEBP, JPEG, PNG or GIF. Auto adaptively delivers images as WEBP in supporting browsers, and switches to PNG or JPEG in browsers that do not support WEBP. Please note that some browsers (currently Safari and Internet Explorer) do not support WEBP and will not display the image. If you want to use WEBP, the best way is to set the format to auto.

//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=300&format=png

Image Quality

If you want to serve WebP or JPG, you can also set the image quality by adding &quality. If you do not specify a quality, the value defined in the renderer default.yml will be used, which is 92% by default.

//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=300&quality=5

normal SSI with quality defined

Rect

The optional rect parameter can be used in image requests and allows images to be cropped prior to scaling.

//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=200&rect=0.04653,0.24601,0.52918,0.7114

normal SSI with Rect defined

The value is expected to be four comma separated float values. The first two values define the upper left corner and the other two values define the lower right corner of the cropped area. All values are expected to be normalised, i.e. the valid values range from 0 to 1, where 0 is left or top and 1 is right or bottom.

Left, Top, Right, Bottom

The left, top, right, bottom parameters are a more human-readable version of the rect parameter described above. The values are identical.

//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=200&right=0.5&top=0.5

normal SSI with right & top rect defined