Auf dieser Seite wird verdeutlicht, wie die Komponente in den unterschiedlichen Konfigurationen dargestellt wird. Zur vereinfachten Darstellung ist der benutzte Text ein standardisierter Platzhalter-Text.
Mein Bild soll nur in einem bestimmten Viewport auftauchen. Wie pflege ich das?
Jedes Bild sollte in einem eigenen Structure Container eingefügt werden. Das Bild richtet sich dann am Structure Container aus und lässt sich im gesamten Layout leichter verschieben und bearbeiten.
Wenn ergänzend zum Bild noch weitere Komponenten hinzugefügt werden, wie etwa Title oder Text, sollte diese Komponenten-Kombination zusätzlich im Structure Container in einen weiteren Group Container gesetzt werden. Das Bild und die Elemente richten sich dann am Group Container aus, der sich wiederum am Structure Container ausrichtet. Die Bündelung im Group Container ist sinnig, wenn Bild + Komponenten eine logische Einheit bilden.
Diese Hierarchie ist abhängig vom jeweiligen gewünschten Layout der Seite.
Die Pflege für unterschiedliche Viewports ist sehr aufwändig. Die Pflege unterschiedlicher Bilder auf unterschiedlichen Viewports ist die Ausnahme und nicht die Regel. Es wird nur notwendig, sofern im Design unterschiedliche Aspect Ratios für die Bilder der jeweiligen Seite geplant sind.
Es muss daher bereits in der Layout-Phase für neue und bestehende Seiten wohl überlegt sein, welches Bildseitenverhältnis angestrebt wird.
In dieser Bildkomponente wird die Bildunterschrift angezeigt. Hierfür ist in der Bildkomponente im Komponenten-Tan 'Metadata' die Einstellung "Display caption as pop-up" ausgehakt.
Image Komponente einfügen, idealerweise in einem eigenen Structure Container und einem eigenen Group Container
Jetzt in den Layout-Modus wechseln. Dazu stehen zwei Optionen bereit:
Im Layout-Modus sicherstellen, dass im Symbol für die Geräte-Rotation das Symbol vertikal und nicht horizontal angezeigt wird.
Die Standardeinstellung ist die horizontale Einstellung. In der horizontalen Anzeige kann jedoch der falsche Viewport widergegeben werden, was zu Pflegefehlern und letztlich Darstellungsproblemen führen kann.
Auswahl der Viewports, die es auszublenden gilt.
Pflege der Viewports immer vom groß nach klein, d.h. zuerst Desktop, dann Tablet, dann Mobile anpassen.
In diesem Beispiel soll das Bild nur auf Mobile angezeigt werden.
Entsprechend hier in Desktop und Tablet mit Klick auf die Bildkomponente das Bild ausblenden über das durchgestrichene Augen-Symbol.
Das Ausblenden blendet zunächst alles aus.
Dabei verschwindet die Bearbeitungszeile, diese ganz einfach über das Emulator-Symbol in der oberen dunkelgrauen Symbolleiste wieder einblenden.
Wieder in den Layout-Modul wechseln, Device-Rotation beachten.
In den Viewport wechseln, in dem das Bild wiederhergestellt werden soll. In diesem Beispiel Mobile/Smartphone.
Das das Bild zunächst überall ausgeblendet wurde, wird das nächsthöhere Element (hier Group Container) angesteuert zum Einblenden.
Auf das durchgestrichene Augensymbol klicken und "Restore All" wählen.
Das Bild ist jetzt nur im Smartphone Viewport sichtbar, siehe Aufbau unten.
Wichtig: Das Bild ist versteckt weiterhin auf der Seite vorhanden, wird jedoch nur für diesen Viewports ausgegeben. Es existiert kein Protokoll und keine weitere Übersicht, welches Bild in welchem Viewport ausgeblendet ist. Für Bildaktualisierungen sollten daher immer alle Viewports geprüft werden.
Dieses Bild ist nur in der Mobile-Ansicht sichtbar. Für Tablet und Phone ist das Bild ausgeblendet.
Das Bild sitzt in einem eigenen Group Container, der wiederum in einem eigenen Structure Container platziert ist.