work with primary pictures

Special feature of the primary image

The first content block in articles such as Events, Letters, News, Projects and others, contains the main image or primary image. This image is the only one that appears in the Slider, Carousel, Overview, in portrait format (on mobile devices) and on the page with the article details. Always make sure that you use high-resolution and appropriately sized images. Otherwise your website may look unprofessional.

Uploading the image

To upload an image, you can drag it into the upload area or click on the area and select the image from your computer.

B53niTcwB8tdAAAAAElFTkSuQmCC

The primary image can be displayed in 4 ways

Cropping the image

You can use the blue buttons at the top to make the image smaller or larger, move or rotate it. You can also use the blue dots on the edge of the image to adjust the image size with the mouse.

The white dashed lines and the white plus in the middle show what will be visible in the image. There is no need for a white border around the image.

Cropping the image

Selecting the display strategy

Depending on how the slider below the image is set, there are two different displays.

ZuBRiLG9rKLGxxfKrkeoFyoAKQF+jAV7q9OA78Pwmo2R9EMX2pAAAAAElFTkSuQmCC U9eAJicurkS4+GFeip8Q63so8478cpBi+SZUliZu+u9g9H1SmuVluflDm0BmC7ZYPHk5Vc1WzpX4PykNFH1o42cSPHo9+G6DZuSW31pkyNlh9z8LhZAThd2OxQAAAABJRU5ErkJggg==

Setting "Cover entire picture" to ON

With this strategy, the entire image remains visible in all display formats. Depending on the image format, white space might be added to the right and left of the image in the Slider or in the portraits, and above and below the image in the Carousel. The size of the image can be adjusted proportionally in the list and in the detailed view.

Setting "Cover image completely" to OFF (focus point)

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 cropped slightly to fit the available format.

A small white circle appears in the image and can be moved with the mouse to set the focus point. The effects of this movement are immediately visible in the image examples.

setting a focus point

Setting the image size in %

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

ZRwPHQAAEQAAEQMA9AQi8e3bICQIgAAIgAAIhSwACH7KPBo6BAAiAAAiAgHsCEHj37JATBEAABEAABEKWAAQ+ZB8NHAMBEAABEAAB9wT+B2TiVktUOozPAAAAAElFTkSuQmCC

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