Es gibt verschiedene Bildervorlagen, die in das Template einfügbar sind. Diese können über den Auswahlbutton “Ausrichtung ändern” gewählt werden.
Das Ganze sieht etwa wie folgt aus. Bei den Auswahlmöglichkeiten “links- und rechtsbündig” sowie auch bei “Zentrieren” kann die größe angepasst werden. Bei den meisten Bildern würde ich die Größe aber nicht anpassen. Oben ist es manuell kleiner gezogen, unten einfach eingefügt.
In den anderen Bildergrößen gibt es keine Anpassungen. Die Größe ist dann fest Vorgelegt. zB:
Als letztes gibt es noch die Gesamte Breite. Im Editor werden die unterschiedlichen Breiten allerdings nicht direkt dargestellt, dafür muss man zunächst auf “Vorschau” und dann “Vorschau in neuem Tab” auswählen um eine exakte Vorschau mit unserem Template zu bekommen.
Bei sehr großen Bildschirmen ist die Gesamte Breite allerdings auch irgendwann beschränkt. Ansonsten würde das den Rahmen sprengen.All diese Beispiel köennnen nicht nur mit Bildern sondern auch mit anderen Elemten (zB die Karte im Netzwerk-Artikel) benutzt werden. Oder auch Splitscreens:
Hier steht zB eine Zwischenüberschrift.
Bei der “Gesamten Breite” gibt es zudem noch die Möglichkeit über eine zusätzliche css-Klasse die Höhe vorzugeben, damit ein Bild die exakte Höhe des Browserfensters hat. Dies ist zB als “Splashscreen” oder Zwischenläufer ganz interessant. Diese kann unter “Zusätzliche CSS-Klasse(n)” zB als “alignfull fullheight” angegeben werden. Das Bild sollte dabei Beschnitten werden, ansonsten sieht es so aus:
Hier ist die Höhe zwar vorhanden, aber das Bild wird nicht gezoomt.
Damit das Bild beschnitten wird kann man zB in der zweispaltigen Gallerie “Bild zuschneiden, um die gesamte Spalte zu füllen.” auswählen.
Hier wird das Bild korrekt beschnitten. Das funktioniert aber natürlich nicht mit allen Bildern.
Das ganze funktioniert auch bei einspaltigen Bildern. Allerdings müssen diese dann als “Cover” eingefügt werden um die Möglichkeit des Zuschnitts zu gewähren. Cover erwarten Standardmäßig einen Text auf dem Bild. Diesen kann man allerdings leer lassen. Zudem wird das Bild im Normalfall mit einem Schatten überlagert. Die Deckkraft dessen kann man im “Overlay” auf 0 setzen, damit das Bild nicht verändert wird. Standardmäßig haben “Cover” immer die Volle Bildschirmbreite und eine Höhe die ungefähr dem Text entspricht. Mit den zusätzlichen css-Klassen “fullheight” wird dieses aber auch auf die volle Höhe gestreckt.
Wenn ihr gerade eingeloggt seid, dann ist oben zusätzlich die schwarze Editorleiste, dadurch ist die volle höhe nicht ganz 100%ig voll, sondern etwas höher. Für die normale Nutzer:in sollte das Bild jedoch exakt in der richtigen Höhe angezeigt werden, sodass pixelgenau durchgescrollt wird. Ein Beispiel, wie man das als Titel nutzen kann ist unter Beispiel fullheight-Titel angezeigt. Das Beispiel muss ich allerdings noch für die Mobile-Ansicht anpassen. NICHT WUNDERN 😉