How to use the Trim and Pad effects
This tutorial shows you how to use the connector-based Trim effect and, optionally, the standard Pad effect. Trim is an import effect, i.e. it is defined in the connector settings and applied to each image in the connector as it is imported. The images in a connector with a Trim effect will be visible in the FSI Server web interface with the effect already applied.
The Trim effect is useful when: you have images with different percentages of transparency or white background that you want to display uniformly.
How to define the Trim effect in the Connector XML
To enable the Trim effect, you need to define it in your Connector XML file.
You can find these files in the \fsi\CONFIG\connectors folder of your FSI installation.
The effect is defined like this
<ImportEffects
<Effect>Trim(2)</Effect
</ImportEffects>
The Trim effect has two parameters:
-
Threshold: defines the trim threshold, must be >= 0 and <= 100 -
Trim Pickup Position: defines which pixel is used as the pickup position for the trim (TL, TR, BL, BR)
By default, the Trim Pickup Position is set to Top Left, i.e. the colour (or transparency level) of the top left pixel is used as the reference for the trim.
How it works
Because image trimming is relatively performance intensive, the Trim effect, unlike the other effects, cannot be applied after import. Therefore, the effect is set in the connector settings and is applied to all images imported into the corresponding connector.
Source Image Dimensions: 2400 x 2400:
Trim area
Trim takes the top left-hand pixel (unless you have defined a different Trim Pickup position) as its reference and crops out all areas that are similar to it (i.e. fully transparent or fully white).
In our example on the right, this applies to the area highlighted in orange.
Trim Area:
Dimension Differences
This will change the image dimensions: the source image has a dimension of 2400×2400 pixels, the final result will have an original server-side dimension (due to the cropping) of 2240×800 pixels.
Depending on the amount of transparent or all-white areas in an image, the dimensions of each image in the connector will be different.
Therefore, the images must be adjusted to ensure a consistent size for delivery.
Trim Result: 2240×800:
How to use Padding
Padding is a real-time effect that is applied after import by modifying the image query.
Padding is defined as follows: padding(Left,Top,Right,Bottom)
For this example, we assume that the target dimensions of the resulting images are 300×200 pixels (to use the images for a product overview page).
The padding could be used in the following way: left and right we define a border of 10px each, while the top and bottom padding will be 50px each.
The source (server-side) image will then be scaled accordingly to fit the target dimensions with the padding.
The original aspect ratio of the cropped image must always be respected. If the padding values do not respect this aspect ratio, the margins will vary to maintain the correct ratio. It is therefore advisable to always keep the original aspect ratio in mind when using padding, otherwise the values given there will be treated as minimum values.
Padding can be used in the following way: if you use a value between 0-1, e.g. 0.25, it will be treated as a percentage, so a padding of 25% will be used. Any value above 1 is treated as a pixel input.
Padding Area, Target Dimension: 300×200:
Final Image Request
The image request for this image would look like this:
Image delivered by FSI Server in target dimension with padding and Matte-Effect: