Bilder

Bilder werden standardmäßig in der Breite xxx xxxx Pixel (16:9 Format) 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 xxx x xxxx

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

Drei Bilder

Mehrere Bilder

Falls Sie mehrere Bilder hinzufügen wollen, sollten Sie sich die Variante "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.

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.

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.

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.

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.

Ganzseitiges Trennerbild

Bei dem Jumbotron handelt es sich um ein ganzseitiges Trenner- oder Dekobild. Vergeben Sie hierzu der Vorlage in der (aussließlich) das Bild liegt den Elementnamen ".vollebreite".

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. Hier ein Beispiel:

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: xxxxx (Einpassen)
  • Kopfbereich: xxxxx
  • Top News auf der Startseite: xxxxx

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.