Cropping and centering images for the slider, the carousel and the listview (e01)
Friday, February 18, 2022
Olivier Gardiol, Polaris Team
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
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