Images

30. Mai 2021 / Stephan Post

Bilder im Artikeltext

Wir können einzelne Bilder im Artikel links oder rechts positionieren. Der Text fließt dann um das Bild herum. Ferner kann die Größe des einzelnen Bildes definiert werden.

Das Schema folgt "Ausrichtung des Bildes"-"Grösse"

Aktuell können folgende Größen und Positionen verwendet werden.

left-lg: Bild steht links, größte Variante
right-lg: Bild steht rechts, größte Variante
left-sm: Bild steht links, kleine Variante
right-sm: Bild steht rechts, kleine Variante
left-xs: Bild steht links, extra kleine Variante
right-xs: Bild steht rechts, extra kleine Variante

Damit das Bild beim Anklicken vergrößert wird, bietet es sich an dieses Bild zusätzlich als Lightbox auszuzeichnen.

Textanzeige Links

Im Text sieht das dann wie folgt aus:

![Bildbeschreibung](_img/dateiname "left-lg")
![Bildbeschreibung](_img/dateiname "left-sm")
![Bildbeschreibung](_img/dateiname "left-xs")

Beispiel Links

Gepard

consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris. Euismod quis viverra nibh cras pulvinar mattis. Felis eget nunc lobortis mattis aliquam faucibus. Turpis cursus in hac habitasse platea dictumst quisque. Facilisis magna etiam tempor orci eu lobortis elementum.

Gepard

Lorem Ipsum em ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris. Euismod quis viverra nibh cras pulvinar mattis. Felis eget nunc lobortis mattis aliquam faucibus consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris. Euismod quis viverra nibh cras pulvinar mattis. Felis eget nunc lobortis mattis aliquam faucibus. Turpis cursus in hac habitasse platea dictumst quisque. Facilisis magna etiam tempor orci eu lobortis elementum.

Gepard

Lorem Ipsum em ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris. Euismod quis viverra nibh cras pulvinar mattis. Felis eget nunc lobortis mattis aliquam faucibus. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris. Euismod quis viverra nibh cras pulvinar mattis. Felis eget nunc lobortis mattis aliquam faucibus. Turpis cursus in hac habitasse platea dictumst quisque. Facilisis magna etiam tempor orci eu lobortis elementum.

Textanzeige Rechts

Im Text sieht das dann wie folgt aus:

![Bildbeschreibung](_img/dateiname "right-lg")
![Bildbeschreibung](_img/dateiname "right-sm")
![Bildbeschreibung](_img/dateiname "right-xs")

Beispiel Rechts

Gepard

Lorem Ipsum em ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris. Euismod quis viverra nibh cras pulvinar mattis. Felis eget nunc lobortis mattis aliquam faucibus. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris. Euismod quis viverra nibh cras pulvinar mattis. Felis eget nunc lobortis mattis aliquam faucibus. Turpis cursus in hac habitasse platea dictumst quisque. Facilisis magna etiam tempor orci eu lobortis elementum.

DRAFT