Bildergalerie

Bilder ergänzen oftmals den textlichen Inhalt einer Website. Sie sind leichter zu erfassen und sprechen den Nutzer emotionaler an. Eine Zusammenstellung von Fotos in Form einer Bildergalerie kann im Inhaltsbereich verwendet werden. Die Auswahl der Bilder erfolgt dabei themenbezogen. Die Darstellung der Bilder erfolgt in Kacheln, die sich automatisch innerhalb der verfügbaren Breite positionieren und verteilen. 

Bezüglich der Quellenangaben bei Bildern wird auf die Komponente Bild | Bildunterschrift verwiesen.

Die Verwendung einer Bildergalerie sollte immer mit dem Inhalt korrespondieren und ihn unterstreichen. Die Themen, die hervorgehoben werden sollen, können durch Bilder besonders gut veranschaulicht werden. Die Motive sind wirkungsvoll oder einprägsam. Bei der Zusammenstellung der Bilder innerhalb einer Galerie sollte immer das Thema als klarer Zusammenhang bestehen bleiben. Bei der Verwendung von Bildern ist immer das Urheberecht zu beachten und ggf. zu benennen. Ergänzend dazu kann ein Bildtitel vergeben werden.

Es sollte ein Mindestanzahl von Bildern in der Galerie angelegt sein, damit die Verwendung berechtigt ist. Es wird empfohlen mindestens vier Bilder der Galerie hinzuzufügen.

Kachelbildergalerie

Kachelbildergalerie

Die Bilder, die der Kachelbildergalerie hinzugefügt wurden, werden automatisch verkleinert. Es werden je Zeile 1–3 Bilder dargestellt und automatisch angeordnet. Es können sowohl Bilder im Querformat wie auch im Hochformat hinterlegt werden. Um ein Bild dann in Originalgröße anzuzeigen, kann das Bild angewählt werden. Durch einen Abdunklungseffekt (Schwarz mit 50% Transparenz) bei Mouseover und der Einblendung einer Lupe wir dem Nutzer diese Funktion verdeutlicht.
Eine sogenannte Lightbox-Galerie öffnet sich im Vollbildmodus. Somit lassen sich die Bilder im Großformat auf einer Website darstellen. Die Bilder werden dynamisch im Vordergrund einer Seite anzeigt, während die eigentliche Website verdunkelt wird. Innerhalb der Lightbox stehen einzelne Steuerelemnte zur Verfügung.

Content-Slider

Für den Einsatz dieser Bildergalerie ist es notwendig die Bilder vorab aufzubereiten. Dabei sollten die Bilder ausschließlich im Querformat verwendet werden sowie einheitliche Abmaße aufweisen. Die Slideshow läuft in Intervallen von sechs Sekunden automatisch durch. Der Nutzer hat die Möglichkeit den automatischen Durchlauf zu stoppen und proaktiv selbst zu navigieren, sowie neu zu starten. Zusätzlich wird die Animation gestoppt, wenn der Nutzer mit der Maus über dem Element steht.
Für die Navigation des Sliders stehen dem Nutzer zwei Varianten zur Verfügung:

1. Pagination
2. Pfeile zur Steuerung am rechten Rand

Alle Steuerelemente befinden sich auf gleicher Höhe als Abschluss am unteren Rand des Moduls. Die Icons werden in der gewählten Portalfarbe angezeigt, wobei der Hintergrund Grau #f1f3f1 eingefärbt ist und einen Rahmen in der 20 % Portalfarbe hat.

Hinweis: Der aktuelle Fokus muss innerhalb des Sliders platziert sein.