Media: Photos, graphics, documents, videos ¶

Contents ¶

Optimally prepare or cut media
Arrange media left, right, top, bottom
Media in columns: 1/2 or 1/3 width
Media Editor: Page ratios
Hero picture
Embed Youtube movie
List of teasers with images – unlimited number – 3:1 aspect ratio is specified
List of teasers without images – unlimited number

Optimally prepare or cut media ¶

If you want to use very large media (e.g. 2MB), they should not be uploaded in their original size to save disk space.
We recommend a width of 2000px as sufficient for all formats.
Do not compress JPG too much: Quality >= 90%, compression for the web is done automatically in TYPO3 (WEBP)
Use the JP(E)G format for photos
Use the PNG format for graphics

Arrange media left, right, top, bottom ¶

Arrange media left ¶

Image on the left without indentation (flowing around the left) [18]

The Media left position is always without indentation.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Aaarange media right ¶

The position Media right is always with indentation.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Arrange media below ¶

The Media position at the bottom is always centered with indentation below the text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Large image below with distance to the navigation bar [8] = positioned centrally with indentation

Arrange media top ¶

Media above is always centered with indentation above the text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Media in columns: 1/2 or 1/3 width ¶

Positioning with columns only works for the "Media bottom" or "Media top" position.

3 media displayed in 3 columns ¶

Several media can be positioned next to each other in columns in an element. There is a maximum of 3 columns.

2 media items displayed in 3 columns ¶

Two images are linked; three columns are selected.
The images are one-third of the width; the final third is left blank.

1 media, 3 columns ¶

You can specify 3 columns, but use only 1 image; the image will then be displayed at ⅓ of the total width.

2 media, 2 columns ¶

You can specify 2 columns, but only link 2 media, ½ as large as the entire width shown.

1 medium, 2 columns ¶

You can specify 2 columns, but only link 1 medium, in which case the medium is displayed with ½ the size.

Media Editor: Page ratios ¶

The following aspect ratios can be selected in the content.

Hero picture ¶

You can only insert a hero image in the top content. The Hero image format can only be selected here.

Copyright for news and hero images (title attribute in IMG tag) ¶

The field "Copyright" is displayed in white in the frontend for news in the slider and generally in the hero image at the bottom left, but not for the images used in plugins, but also for the start page, news list, other lists.

Information such as photographer, location, creation date can also be inserted in the caption (description).

The information is entered in the file list in the image properties under the Metadata tab.

Embed Youtube movie ¶

Insert and save the YouTube link. Film can be placed and embedded like an image.

List of teasers with images – unlimited number – 3:1 aspect ratio is specified ¶

Aerial view of a village with snow accumulation and avalanche cones on the adjacent terrain

Avalanche winter 1951

State of emergency in Switzerland: Far above-average precipiation in November, January and February led to a disastrous winter.

Forest report 2025

How are our forests doing? The forestry report provides answers – with comprehensive insights into the state, development and future of our forests.

Switzerland and climate change

We document the climatic alterations and explore solutions to minimise the risks of climate change.

Hauptinhalt