Bilder

Bilder werden standardmäßig in der Breite xxx x xxx 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 Breite von 870px : 580px

Ein Vogel auf einem Ast — Eine Bildunterschrift

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

Die Bilder wurden in einer Breite von 1920px hochgeladen.
Da sie unterschiedliche Höhen hatten, wurde über den Resizer (BIldeigenschaften) eine Größe von 1200 x 800px angegeben mit dem Modus (zuschneiden), damit beide Bilder in der Ausgabeansicht gleich sind.
Die Darstellungsgröße übernimmt das CMS, bei zwei Bildern nebeneinander sind diese in der Desktop-Ansicht 660 x 440px wenn kein Infoslot vorhanden ist. Mit Infoslot sind es nur 405 x 270px

Drei Bilder

3 Bilder empfehlen sich nur, wenn kein Infoslot vorhanden ist.

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 dieses Element 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.

Außerdem wurde hier die Bildgröße manuell angepasst. Dafür wurde in den Eigenschaften (im Reiter "Resizer") die Breite 300 gewählt und den Modus "eingepasst". Weitere Informationen finden Sie unter dem Punkt "Resizer".

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 deaktiviert und das Bild nicht angeordnet.

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.

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.

Der Resizer

Der Resizer ist eine Funktion des Systems automatisch Bilder zu verkleinern, wenn keine eigenen Eigenschaften (Größen etc.) angegeben werden. Er lässt sich durch das Layout für allgemeine Bilder und Slots definieren und wurde für Ihr Design passend gewählt.

Bilder im Inhaltsbereich: 870 x 870px (Einpassen)
Kopfbereich: 2500 x 720px
Top News auf der Startseite: 300x240px

Wenn Sie nicht die Standardwerte von der Resizer Funktion haben wollen, können Sie die Werte in den Eigenschaften des Bild-Elements überschreiben. Dafür gehen Sie rechts auf die Eigenschaften des Elements und wählen den Reiter "Resizer" aus.

Resizer im Fließtext

Damit Sie die Einstellungen nicht bei jedem Bild selbst machen müssen, gibt es hierfür auch zentrale Einstellungen. Dies bedeutet dass Sie die Eigenschaften unter „Resizer“ nur dann benötigen, wenn die zentralen Einstellungen bei einem bestimmten Bild bzw. auf einer bestimmten Seite nicht passen.

Ob die Werte für Breite und Höhe Maximalwerte oder exakte Werte sind, bestimmen Sie über den Modus (Einpassen oder Zuschneiden).

Beispiel für Maximalwerte: Wenn Sie dort z.B. für Breite 400 und für Höhe 300 eingeben, dann wird ein Bild mit der Originalgröße von 800x600px verkleinert auf 400x300px dargestellt. Hat Ihr Bild eine Originalgröße von 800x400px, dann wird das Bild in 400x200px dargestellt. D.h. das Seitenverhältnis des Bildes bleibt bestehen, der Wert der als erstes „erreicht wird“ (hier die Breite von 400px), wird dann für die Verkleinerung herangezogen. Ist Ihr Bild im Hochformat mit einer Größe von z.B. 600x900px, dann wird Ihr Bild 200x300px dargestellt, da Sie für die Höhe 300px als Maximalwert angegeben hatten.

Über den Modus können Sie festlegen ob das Seitenverhältnis des Originalbildes beibehalten werden soll (Verhalten wie oben beschrieben, Auswahl „Einpassen“), oder ob das Bild exakt entsprechend den eingegebenen Werten zugeschnitten werden soll. Dann würde das Hochformatbild auf 400x300px zugeschnitten und damit in der Ansicht zu einem Querformatbild. Der Resizer schneidet dann vom Bildmittelpunkt aus gesehen links und rechts bzw. oben und unten gleichmäßig viel ab. Wenn es aufgezoomt wird, wird es aber wieder im Original Seitenverhältnis angezeigt.

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.