Bilder

Bilder werden automatisch auf 570px Breite skaliert

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. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Bilder in Spalten

Zwei Bilder

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

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.

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.

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 mittig 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.

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.