Bilder

Bilder werden standardmäßig in der Auflösung 688px * 387px angezeigt.

Änderungen des Bildformates können in den Eigenschaften des Bild-Elementes vorgenommen werden. Weitere Informationen dazu, finden Sie unter dem Punkt Resizer.

Standard Bild (Bildformat 16:9)

Standardmässig ist die Lightbox, also die Vergrößerung des Bildes durch Mausklick, aktiviert. Sie können dies ebenfalls durch die Eigenschaften (im Reiter "Resizer") für das jeweilige Bild deaktivieren.

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.

Bilder in Spalten

Zwei Bilder

Drei Bilder

Mehrere Bilder

Sollten Sie mehrere Bilder anzeigen wollen, empfiehlt sich eine Bildergalerie einzusetzen. Insbesondere das Auswechseln und Hinzufügen von Bildern wird durch die Bildergalerie vereinfacht, da es die Bilder aus der Mediathek nimmt. Für weitere Informationen zum entsprechenden Element, können Sie sich die Seite Bildergalerie anschauen.

Bilder im Textfluss

Dieses Beispiel zeigt Ihnen wie Text um ein Bild fließen kann. Je nach Darstellungsoption ist das Bild hierbei entweder linksbündig, rechtsbündig oder zentriert angeordnet. Ein Abstand zum Text zugunsten der Leserlichkeit und Ästhetik ist hierbei vom Layout vorgegeben.

Um die Darstellungsoption zu verändern, öffnen Sie die Eigenschaften des Bild-Elementes und wählen Sie in den Darstellungsoptionen die horizontale Ausrichtung.

Beachten Sie, dass in der Smartphone Ansicht eine Ausrichtung meist keinen Sinn macht, da zu wenig Platz vorhanden ist. Deswegen wird in der kleineren Ansicht die Darstellungsoption automatisch deaktiviert und das Bild in voller Breite dargestellt.

Bild links ausgerichtet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Bild rechts ausgerichtet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Bild mittig ausgerichtet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eir-mod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu-ptua.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Bild und Text in Spalten

Hier sehen Sie ein Beispiel für die Verwendung von Bild und Text in Spalten. Zudem sehen Sie eine Bildunterschrift zum Bild. Diese können Sie direkt im Element Bild ausfüllen - dafür müssen die Einstellungen nicht geöffnet werden.

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.

Bild responsiv

Bei sehr großen Bildern (üblicherweise Header und "Vollbild") soll das Element Bild (responsiv) verwendet werden. Dieses erstellt unterschiedliche Formate des Bildes, die je nach Bildschirmgröße ausgewählt werden.

Vollbild (Bildformat 4:1)

Um ein Bild in voller Breite anzuzeigen, die Vorlage "Vollbild" auswählen.

Der Bildeditor

Der Bildeditor ist ein Programm mit dem Sie Basisfunktionen zur Bearbeitung von Bildern durchführen können. Hier würde er sich auch eignen den passenden Bildausschnitt für die Kopfgrafiken zu wählen, damit Sie das nicht komplett dem System überlassen und den Fokuspunkt gezielt setzen können.

Klicken Sie in das Bild, das Sie bearbeiten möchten und wählen Sie „Bild bearbeiten“ aus.
In dem neu geöffneten Fenster können Sie nun die Größe Ihres Bildes anpassen, Bereich ausschneiden, das Bild drehen,… Achten Sie darauf, dass das Öffnen des neuen Fensters nicht von einem Pop-Up Blocker verhindert wird.
Mit „Speichern“ speichern Sie Ihre Änderungen, bleiben aber in dem Bildeditor. „Übernehmen“ speichert die Änderungen und schließt den Editor. „Verwerfen“ schließt den Editor und nicht gespeicherte Änderungen werden verworfen.

Tipps zur Barrierefreiheit

Insbesondere für die Barrierefreiheit ist es wichtig, die Zusatztexte der Elemente sinnvoll auszufüllen.

Der Alternativtext

Der Alternativtext (alt-Text) macht den Inhalt und die Funktion von Bildern für blinde Menschen zugänglich, da er von assistiven Technologien, zum Beispiel einem Screenreader, vorgelesen werden kann. Der Alternativtext muss die Funktion und/oder den Bildinhalt einer Grafik vermitteln. … Eines trifft jedoch auf alle Alternativtexte zu: Formulieren Sie kurz und aussagekräftig und verzichten Sie auf Zusätze wie „Das Bild zeigt...“ oder Copyright-Nachweise.

Der Titel des Elements

Achtung: Häufig werden das alt- und das title-Attribut verwechselt. Durch den Einsatz des title-Attributs kann der Nutzer einen sogenannte Tooltip einblenden: Diese kleine „Fahne“ erscheint, wenn Sie mit der Maus über einen Link gehen. Das title-Attribut wird für ergänzende Informationen eingesetzt, die auch für Sehende relevant sind und ersetzt nicht das alt-Attribut.