Cropping and centering images for the slider, the carousel and the listview (e01)

To achieve a good presentation of the images in the list view of the content (calendar, news, actions, etc.), and if necessary in the slider and in the carousel, it is important to

Have images with sufficient width and height margins to allow cropping around the part to be displayed
Crop and centre the subjects correctly (see example)
Use images of good resolution and keep to the pixel dimensions that contribute to a good rendering.

Editing in Polaris is done in the following three steps:

Step 1: Downloading the complete image
Step 2: Basic cropping of the image for publication in the list view, and if necessary in its slider and/or carousel view
Step 3: X-Y centering of the image for these 3 possible views

One image for 3 possible views

Step 1: Upload the image

Upload the complete image with as much margins as possible to facilitate cropping

Step 2: upload the image

Step 2: Crop the image

This involves cropping the image for its various views, bearing in mind that if one of the views is the slider, the title and description overlay the image. These are of varying heights depending on the length of the texts.

After choosing the desired frame, click on "Crop".

Step 2: crop the picture

Step 3: Centre the image in the three views

Moving the focus point with the cursor allows you to move the cropped image from top to bottom and from left to right and to observe the result in the three possible views of the slider, the carousel and the content list.

When the result for the view(s) is adequate, click on the "Set focus point" button

Step 3: Set the focus point

Tip

For the slider view, you need to leave the necessary margin at the bottom of the image for the title and the text which will appear as a transparent overlay

To ensure the best rendering, it is sometimes necessary to do steps 1 to 3 more than once

Slider: leave room for the title and text

Step 4: Choose the size of the image and the descriptions

Choose the width proportion that the image should occupy in the content detail view

then enter the image label and text

Step 4: choose the ratio of the image and the text