Musterseite: Bild-Abschnitt

Ein Bild-Abschnitt ergänzt einen Text-Abschnitt und kann auch nur mit diesem sinnvoll kombiniert werden.

Steine – großes Bild, ohne Aktion

Ein Bild-Abschnitt enthält: 

  • Angabe zur Bilddarstellung: links, rechts, groß, kleines Bild links, kleines Bild rechts  
  • Abbildung Abbildungen können wahlweise aus einem Bilderpool ausgewählt oder an Ort und Stelle hochgeladen werden.
  • Copyright-Hinweis (Eingabemöglichkeit nur bei direkt hochgeladenen Bildern)  
  • Alternativtext (eine Eingabe überschreibt den von verknüpften Bildern geerbten Alternativtext) Der Alternativtext ist ein Pflichtfeld; ohne Alternativtext wird der ganze Bildabschnitt nicht ausgegeben
  • Bildunterschrift (eine Eingabe überschreibt die von verknüpften Bildern geerbte Bildunterschrift)
  • Auswahl des Klickverhaltens: Vergrößerungs-Funktion, Link (intern, extern und Download) oder „keine Aktion“, Standard ist die Vergrößerungsfunktion
Darstellung links mit Vergrößerungsfunktion
kleines Bild rechts mit Link (YouTube-Integration)

Die Anzeige des Vergrößerungs- oder Linksymbols erfolgt rechts unten im Bild. Wird über einen internen Link auf eine Bildergalerie verwiesen, wird ein Bildergalerie-Symbol ausgegeben. Unabhängig von der Darstellung des Symbols kann das ganze Bild angeklickt werden, um die hinterlegte Aktion auszulösen. Bilder werden auf die im Styleguide vorgegebene Größe verkleinert, die Höhe wird automatisch ermittelt. Zu kleine Bilder werden vergrößert ausgegeben.

Darstellung mittleres Bild links

Die Vergrößerungs-Funktion auf der Website stellt das zu vergrößernde Bild in der aktiven Seite als Layer mittig über den Inhalten der Seite dar. Die Inhalte der Seite werden hierbei mit einem weiteren Layer halbtransparent abgedunkelt. Ein „schließen“-Button wechselt zurück zur Seitenansicht. Enthält eine Seite mehrere Bild-Abschnitte, können alle Bilder in der Großbildansicht über eine Blätterfunktion nacheinander betrachtet werden. Die Vergrößerungs-Funktion arbeitet unter Verwendung von JavaScript ohne erneuten Seitenaufruf. Ist JavaScript nicht verfügbar, wird das Bild über einen direkten Link zum Bild aufgerufen.

kleines Bild links mit Vergrößerungsfunktion
mittleres Bild rechts
Bild mit Link auf einem Artikel vom Typ externe Seite (neues Fenster)

Erläuterungen und Hinweise

Bildnachweise

  • Unsplash Licence
  • Unsplash Licence
  • Unsplash Licence
  • Unsplash Licence
  • Unsplash Licence
  • Unsplash Licence
  • Unsplash Licence
  • Unsplash Licence