Webkit Inhaltselement Bilder
Bilder können an vielen Stellen auf Websites genutzt werden, beispielsweise als Hero-Elemente im Kopfbereich oder auch in Teasern als Weiterleitung zu anschließenden Themen.
Hinweise zur Benutzung
Sollen Stockphotos verwender werden, so muss die Verwendung vorher unbedingt rechtlich abgesichert werden. Zuständig dafür ist die Abteilung Rechtssicherheit.
Bilder in der Inhaltsübersicht
Alle im Webkit enthaltenen Bilder befinden sich in einer Bilder-Datenbank im Reiter Bilder der Inhaltsübersicht. Bilder enthalten dabei grundsätzlich einen Admin-Titel, der das Wiederfinden in der Datenbank erleichtert, aber nicht einzigartig sein muss. Trotzdem sollte eine geeignete Namenskonvention für Bilder wie auch für andere Inhaltselemente entwickelt und angewendet werden.
Jedes Bild enthält außerdem Tags, über die man Bilder filtern kann. Auch hier ist es empfehlenswert, ein gutes System zu entwickeln, um das Filtern und Wiederfinden der Bilder zu ermöglichen.
Des weiteren enthält jedes Bild eine Sprache und das letzte Bearbeitungsdatum (Aktualisiert), sowie eine einzigartige ID. Wurde das Bild einer Gruppe zugeordnet, so wird dies in der entsprechenden Spalte angezeigt (Gruppen werden nur in manchen Webkits genutzt).
Folgende Aktionen können auf Bilder angewendet werden: mit Bearbeiten wird kann das Bild bearbeitet, mit Übersetzen übersetzt, und mit Gruppen kann das Bild einer Gruppe zugeordnet werden. Außerdem befindet sich dort auch die Aktion Löschen.
Bilder einpflegen
Neue Bilder können direkt über den Button Bild hochladen in die Bilder-Datenbank eingepflegt werden. Dieser öffnet das Edit-Fenster für ein Bild mit den im folgenden beschriebenen leeren Informationsfeldern.
Der Admin-Titel wird in der Bilderübersicht angezeigt und sollte gemäß der im eigenen Webkit eingeführten Namenskonvention sinnvoll gewählt sein. Außerdem besitzt jedes Bild eine Sprache.
Das Feld Barrierefreie Bildbeschreibung erscheint, sobald ein Bild ausgewählt wird und ist für die Barrierefreiheit von Seiten essentiell wichtig. Zudem wird die Barrierefreie Bildbeschreibung angezeigt, wenn das Bild nicht angezeigt werden kann. Hilfreiche Tipps zum Verfassen einer Barrierefreie Bildbeschreibung finden sich auf den Seiten des DBSV.
Außerdem können Tags für das Bild vergeben und eine Bildunterschrift im Feld Beschreibung angegeben werden. Das Feld Bildnachweise (Credits) ermöglicht es, einen Urhebernachweis einzutragen. Beschreibung und Bildnachweise werden automatisch im Frontend unterhalb des Bildes angezeigt, sobald es in eine Seite eingehängt wird (nur nicht in Hero-Elementen oder Teasern). Außerdem werden Bildnachweise auch am Ende jeder Seite angegeben. Durch Hinzufügen eines Links zum Bildnachweis wird der Bildnachweis im Frontend zu einem Hyperlink mit entsprechender Ziel-URL.
Außerdem kann für jedes Bild eine Lizenz vergeben werden, die Optionen in der Dropdown-Liste entsprechen den üblichen Lizenzwerkzeugen.
Durch abschließendes Speichern wird das Bild in die Bilder-Datenbank übernommen.
Das Hinzufügen von mehreren Bildern gleichzeitig über den Button Sammelupload von Bildern ist nicht zu empfehlen, da in diesem Falle die Feldeinträge für alle Bilder gleich lauten und im Nachgang einzeln angepasst werden müssen.
Bilder einpflegen innerhalb von Seitenelementen
Ebenso ist es möglich, neue Bilder direkt beim Erstellen oder Bearbeiten von Inhalten einer Seite einzupflegen. Dies erfolgt innerhalb eines Paragraphen im Inhalts-Bereich, der ein Bild enthält (Bild, Text mit Bild), innerhalb eines bebilderten Teasers oder innerhalb des Bereichs Hero Area. In jedem dieser Fälle öffnet sich über den Button Auswählen eine Auswahlmaske (auch Overlay genannt), in der ein Neues Bild in die Datenbank eingepflegt werden kann. Über den Button Dateien auswählen kann eine Bilddatei auf dem eigenen Computer ausgewählt werden. Ist dies erfolgt, erscheinen in der Eingabemaske eine Vorschau des Bildes sowie alle Felder, in die Informationen zum Bild eingetragen werden können. Sind diese vollständig ausgefüllt, wird das Bild über Speichern in die Datenbank eingepflegt.
Focal Point und Vorschau
Im Bearbeiten-Fenster und in der Auswahlmaske wird das ausgewählte Bild mit einem kleinen Kreuz in der Mitte angezeigt. Dieses Kreuz markiert den zentralen Punkt (Fokuspunkt) des Bildes. Wird das Bild in einem Seitenelement eingehängt, das ein anderes Format benötigt, so kann das System das Bild ins richtige Format zurechtschneiden. Dabei wird der Fokuspunkt in der Regel fokussiert. Befindet sich der zentrale Punkt des Bildes nicht in der Mitte, so kann das Kreuz mittels Drag and Drop an die zentrale Position des Bildes verschoben werden. Durch Doppelklick auf das Kreuz erscheint ein numerisches Feld für die Angabe des Fokuspunkts.
Über Vorschau unterhalb der Bildanzeige ist es möglich, sich die Ausschnitte des Bildes bei verschiedenen Formaten anzeigen zu lassen. Bei Klick öffnet sich die Bildvorschau, in dem alle möglichen Formate und die dazugehörigen Bildausschnitte angezeigt werden.
Soll sichergestellt werden, dass das Bild in dem Format eingepflegt wird, in dem das verwendende Seitenelement es benötigt, so empfehlen sich folgende Bildformate:
- 16:9 (1920x1080px, 300dpi)
- 21:9 (2520x1080px, 300dpi)
- 3:4 (750x1000px, 300dpi)
