How to work with main images in articles (v01)

Friday, August 18, 2023

Team Polaris

Starting with R1.3.6, adding main image uses new functions. Main image is the image of the first content block in articles like events, letters, news, projects and various. It is displayed in the slider, carousel, the list view, portrait view (on mobile) and in the article detail page. Other images in content blocks are added the same way as before. This is described in article "Cropping and centering images for the slider, the carousel and the list view".

To achieve a good presentation, you should always use images with good resolution and size. If you use low resolution images, your website may look bad.

When choosing images from internet, please beware of copyright laws and the possible legal consequences.

One image for 4 possible formats.

Step 1: Upload the image

Upload the image by dragging it to the upload area or clicking in the upload area and selecting the image from your file system.

Maximum size of file

Step 2: Crop the image

Use the blue buttons at the top to zoom out, zoom in, move or rotate the image, or use the blue dots at the edge of the image to resize the image with the mouse.

The white dotted lines and the white cross in the middle help you to see what will be visible.

In this step you cannot add white space to the image. This should not be necessary either, as you will see in the next step. If you still want to do this, you will have to do it in another program, out of Polaris, and upload the image again.

Step 3: Choose the display strategy

There are two display strategies you can choose:

3.1 Set "Cover full area with image" to ON.

3.2 Set "Cover full area with image" to OFF (set the focus point).

To view the effects, toggle the button below the image.

Step 3.1: Strategy = Setting "Cover full area with image" to ON

With this strategy the entire image remains visible in all display formats.

Depending on the image format, white space can be added to the right and left of the image in the slider or in the portraits or above and below the image in the carousel. In the list and in the detail view, the size of the image can be adjusted proportionally.

You can see the effects in the format examples below.

Step 3.2: Strategy = Setting "Cover full area with image" to OFF (focus point)" to

This strategy completely fills the available format by cropping the image to the format size and keeping the focus point in the center. No white space is added. Instead the image can be slightly cropped to fit the available format.

A small white handle (circle) appears in the image and can be moved with the mouse to set the focus point.

Move the focus point and see the effects in the format examples below.

Set focus point

Step 4. Set the image size in %

Finally you can set the image size in %. This has impact only on the display in the detail page.

It is good practice to acknowledge the source of your image if you want to publish the article for all to see.

Don't forget to click on the "SAVE" button to save the article!

Image size in %