tl;dr: When cropping images using the image transformation option of the scrivito_image_tag helper, the new crop parameter now lets you specify the area of interest: left, right, top, bottom, or center.
Refined Image Cropping
Posted on
A little bit of history
Starting at version 0.70.0 of the Scrivito SDK, images can be transformed via the scrivito_image_tag helper. You can, for example, crop images to fit them into an area with given dimensions. This can be achieved by setting the fit parameter to crop, like so:
<%= scrivito_image_tag widget, :image, transform: {
width: 200, height: 200, fit: :crop
} %>
If (and only if) both image dimensions are larger than those of the target area, the image is scaled down prior to cropping, keeping its aspect ratio and making it completely fill the area. Otherwise, the image is not scaled. In the next step, the image parts exceeding the given area are removed.
Until today, cropping always focused on the image center and removed excess image data in equal parts from both sides of the dimension concerned. This only leads to the desired result if the relevant image information is at the center.
And now the news
To make image cropping more flexible, we added the
crop parameter that lets you specify one of five possible image sections of interest: left, right, top, bottom, or center, the latter being the default setting.
As an example, the image shown here is 600 pixels wide and 200 pixels high. To have it cropped retaining the area on the left-hand side, use the following helper call:
<%= scrivito_image_tag widget, :image, transform: {
width: 200, height: 200, fit: :crop, crop: :left
} %>
Note that not the scrivito_image_tag helper itself but the service responsible for handling and delivering images has been extended. Thus, all apps using an SDK version that supports image transformation (>= 0.70.0) have access to this new functionality.
