Bildbearbeitung
Nachdem Sie ein Content Element mit einem Bild eingefügt haben, können Sie eine Bildbeschreibung hinzufügen (Image Metadata) und mit dem Editor den Bildfokus für verschiedene Formate einstellen. Dieses Tutorial behandelt lediglich die Bearbeitung im jeweiligen Element. Möchten Sie Bild-Metadaten einmalig für alle Anwendungsfälle auf der Website hinterlegen, finden Sie im Tutorial zu den Bilder-Metadaten die einzelnen Schritte.
Anleitung Video-Tutorials Hinweise, Tipps & Tricks
Schritt für Schritt
Arbeiten mit dem Bildeditor/Bildunterschrift
- Für die folgenden Erläuterungen und Video-Anleitungen spielt das Inhaltselement eine untergeordnete Rolle, solange in diesem eine Bilddatei hinzugefügt werden kann.
- Im Bereich Beschreibung (Bildunterschrift) setzen Sie bei Elementspezifischen Wert einen Haken, um in der Maske eine Bildunterschrift einfügen zu können.
- Die Felder Titel und Alternativer Text sind vor allem für Barrierefreiheit und SEO relevant.
- Mit Klick auf den Button Open Editor/Editor öffnen rufen Sie den Bildeditor auf. Bearbeiten Sie zunächst die unten beschriebenen Schritte zum Bildausschnitt, Fokus und zu den Ausgabekanälen.
- Ist der Regler im Bereich Synchronisiere cropArea aktiviert (blau), dann finden die Bildbeschnitte aus dem ersten (mobile) Bildausschnitt automatisch auf alle Endgeräte Anwendung. Möchten Sie diese Einstellung deaktivieren, klicken Sie auf den Regler.
- Speichern Sie Ihre Änderungen zum Abschluss.
Bildausschnitt und Fokus einstellen
- Aspect Ratio/Seitenverhältnis zeigt an, welche Seitenverhältnisse Sie voreinstellen können (16:9, 1:1, 3:2, 4:3, Free), wählen Sie eines aus.
- Wenn Sie ein voreingestelltes Seitenverhältnis wählen, wird der Bildrahmen automatisch festgelegt. Positionieren Sie den Bildausschnitt mit dem Cursorkreuz.
- Wenn Sie den Bildausschnitt individuell (freier Modus) festlegen, ziehen Sie das hell markierte Bild an den Ecken mit dem Cursorpfeil auf die gewünschte Größe. Positionieren Sie den Bildausschnitt mit dem Cursorkreuz.
- Beachten Sie, dass im freien Bildbeschnitt die Pixelmaße für den Bildausschnitt entscheidend sind. Bei mehreren Bildern (z.B. Slider) kann bei unterschiedlichen Maßen das Bild jeweils unterschiedlich groß angezeigt werden.
- Mit dem Button Reset/Zurücksetzen setzen Sie die Einstellungen auf Standard bzw. den zuletzt eingestellten Status zurück.
Ausgabekanäle
- Mit Mobile, Tablet, Desktop und Widescreen sind vier Ausgabekanäle zu bearbeiten.
- Legen Sie nacheinander Bildausschnitt und Fokus für jeden Ausgabekanal fest.
- Sichern Sie die Einstellungen mit dem Button Accept/Akzeptieren oder verwerfen die Änderungen mit dem Button Cancel/Abbrechen.
Video-Tutorials via jweiland.net
Metadaten für Dateien verwalten
Verwalten Sie die Metadaten Ihrer Dateien, Suchmaschinenoptimierung und Barrierefreiheit mittels "Alternative Text".
Laufzeit: 09'09"
Video bei jweiland.net aufrufen ↗
Bildauschnitt verändern
Die oben stehenden Erläuterungen sind erstellt worden, da in toujou die Bildbearbeitung für vier Endgeräte bestimmt werden kann. Hier sehen Sie die Funktion für eine Standardeinstellung als Video.
Laufzeit: 4'08"
Video bei jweiland.net aufrufen ↗
Hinweise, Tipps & Tricks
Möglicherweise erscheinen Ihnen diese Einstellungen auf den ersten Blick etwas überdetailliert. Doch diese Bildformatierungen ergeben durchaus Sinn: Nicht jedem Besucher Ihrer Website steht das volle Format eines großen Bildschirms zur Verfügung.
Überlegen Sie also, welche Bereiche eines Schmuckbildes beispielsweise auf einem Smartphone noch gut aussehen oder welche Informationen notwendigerweise dargestellt werden sollen. Die Mühe lohnt sich, gerade weil die Bilddarstellung bei vielen Websites stiefmütterlich behandelt wird.
Verknüpfte Elemente
Elemente aus der toujou-Elementbibliothek, die mit diesen Einstellungen in Verbindung stehen.
Alle Elemente im Überblick Alle Tutorials im Überblick