CBK-006 Image

Variaton Beispielseite

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?

Hinweis zur Bilderpflege (struktureller Aufbau)

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.

Benötige ich unterschiedliche Bilder?

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.

Bildkomponente mit Layout 12 Spalten

Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

Bildkomponente mit Layout 10 Spalten

Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

Bildkomponente mit Layout 8 Spalten

Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

Bildkomponente mit Layout 8 Spalten plus Caption

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.

Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln Fleischtomtaten mit Bio-Siegel

2 x Bildkomponente mit Layout 6 Spalten

Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

3x Bildkomponente mit Layout 4 Spalten

Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

4x Bildkomponente mit Layout 3 Spalten

Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

Wie pflege ich Bilder nur für bestimmte Viewports?

Beispielhafte Anleitung für ein Bild, das nur im Viewport Smartphone sichtbar sein soll.

Schritt 1: Einfügen

Image Komponente einfügen, idealerweise in einem eigenen Structure Container und einem eigenen Group Container 

Beispielhafte Hierarchie in der Reihenfolge Structure Container dann Group Container und darin jeweils einzeln die Komponenten Title, Text, Image

Schritt 2: Layout-Modus

Jetzt in den Layout-Modus wechseln. Dazu stehen zwei Optionen bereit:

  • über die obere Navigationsleiste unter Edit 
Auswahl der Bearbeitungsmodi in AEM mit hervorgehobenem Layout-Modus
  •  über die Komponente und dem Layout-Symbol mit dem Doppelpfeil
Bearbeitungsleiste einer Komponente mit hervorgehobenem Wechselpfeil-Symbol zum Wechsel in den Layout-Modus über die Komponente
Wichtig: Beim Wechsel über die obere Navigationsleiste muss immer aktiv zwischen Layout und Edit hin- und hergewechselt werden. Da diese nicht automatisch wechselt.

Schritt 3: Anzeige-Einstellung umstellen

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.

Navigations-Subleiste in der Layoutansicht mit dem Rotationssymbol für Geräte auf vertikal gestellt

Schritt 4: Viewports ausblenden

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.

Bearbeitungsleiste Komponente in der Layout-Ansicht mit hervorgehobenem Augensymbol zum Ausblenden der Komponente

Schritt 5: Einzelnen Viewport einblenden

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. 

Hervorgehobenes durchgestrichenes Augensymbol zur Verdeutlichung der ausgeblendeten Symbole

Auf das durchgestrichene Augensymbol klicken und "Restore All" wählen.

Markiertes ausgeblendetes Augensymbol bisher versteckter Elemente mit nebenstehender Befehlsfläche Restore All zur Wiederherstellung

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.

Beispielbild Smartphone

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.