Dokumentation Template 3.0

Seitenelement: Bild

Das Seitenelement Bild ermöglicht ein einzelnes Fotos oder eine hochauflösende Abbildung in voller Breite und anderen Layoutcontainern zu platzieren.

Ziehen Sie einfach Ihr Browser-Fenster auf die Größe eines Smartphones oder Tablets, um zu testen, wie ein Element in der mobilen Ansicht mit dem Smartphone oder auf dem Tablet aussieht.

Allgemeines zum Seitenelement Bild

Mit dem Seitenelement Bild kann eine einzelne Abbildung auf der Seite platziert werden. Sie können das Bild zudem mit einem Alternativtext (Titel), Urheberinformationen und einer Beschreibung versehen. Das Element ist dafür vorgesehen, besonders aussagekräftige oder eindrucksvolle Bilder als Blickfang auf der Seite zu positionieren. Sinnvollerweise handelt es sich um eine hochauflösende Abbildung.

Abbildungen können alternativ auch in einem Flexblock platziert werden, dazu finden Sie hier eine Erläuterung. Im Gegensatz zum Seitenelement Bild kann der Flexblock jedoch nicht über die komplette Seitenbreite gehen. Das Seitenelement Bild ist dann sinnvoll, wenn die Abbildung im Fokus stehen soll und nicht nur einen Text illustriert.

Sie können für das Element Bild die Container mit Standard-Textbreite col8 oder Textbreite col6 sowie die Ausreißer-Elemente rechts und links davon nutzen. Außerdem kann das Seitenelement im Container mit der vollen Breite (col12) platziert werden, damit die Abbildung ganzseitig erscheint.

Wir können das Seitenelement Bild überall zwischen Intro-Box und Kontaktbox/Fußzeile setzen.

Auf schmalen Ausgabegeräten wird das Seitenelement automatisch in voller Bildschirmbreite gesetzt.

  • Bild: Den richtigen Bildpfad finden wir, indem wir auf das Ordner-Symbol klicken und unter dem Punkt „Verzeichnisse“ bis zum gesuchten Ordner klicken. Vor dem Ordner setzen wir ein Häckchen und klicken im rechten Bereich der Zeile die Lupe an. Dann können wir das gewünschte Bild auswählen und auf der Seite platzieren. Lesen Sie in der Doku eine ausführliche Anleitung, wie Dateien in OpenCms hochgeladen werden. Den Bildausschnitt können wir selbst wählen, dazu gibt es ebenfalls eine Anleitung.
  • Titel: Der Titel wird als Platzhalter beispielweise für Personen mit einer Sehbehinderung ausgegeben. Hier beschreiben wir, was auf dem Bild zu sehen ist. Aus Gründen der Barrierefreiheit darf dieses Feld nicht leer bleiben.
  • Copyright: Bei „Copyright“ muss nur etwas eintragen werden, wenn die Bildrechte nicht der Universität Stuttgart, dem Institut oder der Einrichtung selbst gehören. Wenn Externe uns ein Bild zur Verfügung stellen, dann fügen wir hier den Fotografenhinweis ein (Beispiel: Bild: Max Mustermann).
  • Beschreibung: Die Beschreibung ist eine erklärende Bildunterschrift, die unterhalb des Bilds ausgespielt wird. Das Ausfüllen dieses Felds ist optional.

Beispiele, wie das Seitenelement Bild platziert werden kann

Studierende bei der Einführungsveranstaltung (c)
Erstsemester bei der Einführungsveranstaltung

Hier steht Fließtext. Fließtext steht hier. Hier steht Fließtext. Hier steht Fließtext. Hier steht haufenweise Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Sehr viel sogar. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht noch mehr Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. 

Studierende bei der Einführungsveranstaltung (c)
Erstsemester bei der Einführungsveranstaltung

Hier steht Fließtext. Fließtext steht hier. Hier steht Fließtext. Hier steht Fließtext. Hier steht haufenweise Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Sehr viel sogar. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht noch mehr Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. 

Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. 

Studierende bei der Einführungsveranstaltung (c)
Erstsemester bei der Einführungsveranstaltung

Hier steht Fließtext. Fließtext steht hier. Hier steht Fließtext. Hier steht Fließtext. Hier steht haufenweise Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Sehr viel sogar. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht noch mehr Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. 

Studierende bei der Einführungsveranstaltung (c)
Erstsemester bei der Einführungsveranstaltung

Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. Hier steht Fließtext. 

Support vom Webteam

 

TIK - NFL - Webteam

Allmandring 3a, 70550 Stuttgart, Holzbaracke

Zum Seitenanfang