Using Focal Point with GenticsImageStore

When the aspect ratio of an image is changed while resizing (and the mode is not “force”, which would distort the image), the image is also cropped to the new aspect ratio.

With the resize mode “smart”, the image will be cropped in a way that the center of the image is preserved (will still be the center after cropping).

If it is required, that the most interesting part of an image (e.g. the face of a person) is not cropped while resizing, it is possible to set the focal point of the image (to define, where the most interesting part is) and to use the resize mode “fpsmart”, which will take the focal point into consideration while resizing.

1 Usage


#set($image = $cms.tag.parts.img.target)##
<img src='#gtx_gis($image, {"width": 100, "height": 100, "mode": "fpsmart"})'>

2 How fpsmart works

2.1 Resizing with mode smart

When resizing the image (with original size 400×267)

is resized with the following settings:


<img src='#gtx_gis($image, {"width": 200, "height": 200, "mode": "smart"})'>

the image will first be cropped like this

to match the requested aspect ratio:

and then resized to:

2.2 Resizing with fpsmart

If a focal point is set for the image like this:

and the image is resized with:


<img src='#gtx_gis($image, {"width": 200, "height": 200, "mode": "fpsmart"})'>

the image will be cropped in a way that moves the focal point towards the center of the cropped image:

which results in

and after resizing in