Bild-Komponente (Image)

Die Bild-Komponente zeigt ein Bild auf dem Stand. Auf Wunsch erscheinen darunter eine Bildunterschrift, ein Lizenzhinweis und ein Hinweis, dass das Bild mit künstlicher Intelligenz erzeugt wurde. Außerdem lässt sich das Bild mit einem Link versehen.

Im Auswahlfeld „Komponententyp" heißt die Komponente Image.

Gilt für alle Komponenten: Anlegen, Platzieren, Größe ändern, Verzerren und Speichern funktionieren bei allen Komponenten gleich. Diese Seite zeigt die Bedienung ausführlich am Beispiel der Bild-Komponente. Die Seiten der übrigen Komponenten beschreiben nur deren eigene Felder, für die Bedienung sehen Sie hier nach.

Komponente anlegen

1. Öffnen Sie den Reiter Stand und klicken Sie im Kasten „Stand-Editor" unter „Komponenten" auf Erstellen. Es entsteht eine neue Komponente mit dem Titel „Component" und einer laufenden Nummer, 200 × 200 Pixel groß, und der Reiter „Inhalt" öffnet sich.
2. Geben Sie im Feld Titel einen sprechenden Namen ein, zum Beispiel „Produktbild". Unter diesem Namen finden Sie die Komponente später in der Auswahlliste des Stand-Editors.
3. Wählen Sie als Komponententyp den Eintrag Image. Jetzt erscheinen die Felder der Bild-Komponente.
4. Klicken Sie neben Bildquelle auf Durchsuchen. Der Medienmanager öffnet sich. Laden Sie das Bild hoch oder wählen Sie ein vorhandenes aus, tragen Sie die Angaben ein und klicken Sie auf Speichern im Angabenbereich. Die Bedienung beschreibt die Seite Medienmanager.
5. Achten Sie darauf, dass der Haken Metadaten übernehmen gesetzt ist, und klicken Sie auf Übernehmen. Ab Version 12.4.9 ist der Haken bereits gesetzt; bis Version 12.4.8 mussten Sie ihn von Hand setzen. Bild, Alternativtext und die übrigen Angaben stehen jetzt in der Komponente.

Das Produktbild im Medienmanager, mit den Angaben zur KI-Erzeugung und gesetztem Haken „Metadaten übernehmen"

1. Ergänzen Sie bei Bedarf Titel, Bildunterschrift und Link, und setzen Sie die Haken Lizenz anzeigen und KI-Info anzeigen, wenn diese Hinweise erscheinen sollen.

Die Bild-Komponente mit übernommenen Angaben

1. Speichern Sie den Stand. Wie das Speichern funktioniert, steht unter Hintergrundbild einstellen.

Unter dem Titel zeigt der Stand-Editor die Sprungmarke der Komponente, zum Beispiel #image-1. Sie setzt sich aus dem Komponententyp und der Nummer der Komponente zusammen und lässt sich über das Symbol daneben kopieren. Mit ihr kann ein Link direkt zu dieser Komponente in der Liste unter dem Stand springen.

Hinweis: Direkt nach dem Wechsel des Komponententyps zeigt der Stand-Editor noch die Sprungmarke des vorherigen Typs an, bei einer neuen Komponente also zum Beispiel #content-1 statt #image-1. Wählen Sie die Komponente in der Auswahlliste kurz neu aus oder speichern Sie den Stand, dann erscheint die richtige Marke.

Komponente in der Szene platzieren

Eine neue Komponente liegt zunächst oben links in der Szene. Nach „Metadaten übernehmen" hat sie außerdem die Pixelgröße des Bildes und ist entsprechend groß. So passen Sie sie an die gewünschte Stelle an:

1. Grob platzieren: Fassen Sie die Komponente mit der Maus an und ziehen Sie sie an die Stelle der Szene, an der sie stehen soll. Am besten legen Sie dabei die linke obere Ecke der Komponente genau auf die linke obere Ecke der Zielfläche, zum Beispiel eines Roll-ups oder eines Bildschirms im Hintergrundbild.
2. Größe ändern: Ziehen Sie an den blauen Punkten am Rand der Komponente, bis sie ungefähr die Größe der Zielfläche hat. Dieser Modus, „Größe ändern", ist voreingestellt.
3. Verzerren: Liegt die Zielfläche im Hintergrundbild schräg oder perspektivisch, öffnen Sie im Stand-Editor den Reiter Layout und wählen Sie unter „Transformationsmodus" Verzerren. Jetzt lässt sich jede Ecke einzeln verschieben. Ziehen Sie die übrigen Ecken an die blauen Eckpunkte auf die passenden Stellen der Zielfläche.
4. Speichern Sie den Stand.

Das Produktbild ist auf das Roll-up im Hintergrundbild verzerrt, im Reiter „Layout" ist „Verzerren" gewählt

Der Reiter „Layout"

Statt mit der Maus können Sie Position und Größe auch als Zahlen eintragen. Die Werte beziehen sich auf die Szene. Alle Einstellungen dieses Reiters, vom Transformationsmodus bis zur zusätzlichen CSS-Klasse, beschreibt die Seite Einstellung von Layout und Sichtbarkeit.

Die Felder

Abschnitt	Feld	Bedeutung
Bildquelle	Bildquelle (Pflicht)	Das Bild. Wählen Sie es über „Durchsuchen" aus dem Medienmanager, oder tragen Sie die Adresse eines Bildes direkt ein.
	Alternativtext	Eine kurze Beschreibung dessen, was auf dem Bild zu sehen ist, für Besucher, die das Bild nicht sehen können. Ab Version 12.4.10 kein Pflichtfeld mehr: Solange es leer ist, weist ein gelber Hinweis darauf hin. Ein leeres Feld kennzeichnet das Bild als rein dekorativ.
	Titel	Erscheint als kleiner Hinweis, wenn der Mauszeiger über dem Bild steht.
	Bildunterschrift	Text unter dem Bild.
Link	Link-URL	Macht das Bild anklickbar und führt zu dieser Adresse.
	Link-Ziel	„Gleicher Tab" oder „Neuer Tab". Ohne Auswahl öffnet sich der Link im gleichen Tab.
Lizenz	Lizenz anzeigen	Blendet den Lizenztext unter dem Bild ein.
	Lizenztext	Angaben zu Urheber und Nutzungsrechten.
KI-Informationen	KI-generiert	Kennzeichnet das Bild als mit künstlicher Intelligenz erzeugt.
	KI-Info anzeigen	Blendet den KI-Hinweis unter dem Bild ein.
	KI-Tool	Das Werkzeug, mit dem das Bild erzeugt wurde, zum Beispiel „ChatGPT".

Sobald eine Bildquelle gewählt ist, erscheint das Bild in der Szene; Änderungen an den Feldern werden laufend übernommen. Bis Version 12.4.9 war auch der Alternativtext Pflicht, und das Bild erschien erst, wenn er ausgefüllt war. Füllen Sie ihn trotzdem aus, wann immer das Bild etwas zeigt, das für den Besucher wichtig ist.

KI-erzeugte Bilder kennzeichnen

Ob ein Bild mit künstlicher Intelligenz erzeugt wurde, halten Sie an zwei Stellen fest, die zusammenwirken:

• Beim Bild im Medienmanager tragen Sie „KI-generiert" und „KI-Tool" ein. Diese Angaben bleiben bei der Datei und stehen jeder Komponente zur Verfügung, die das Bild verwendet.
• In der Komponente entscheiden Sie mit „KI-Info anzeigen", ob Besucher den Hinweis sehen.

Unter dem Bild erscheint der Hinweis „KI-generiert" nur, wenn in der Komponente sowohl „KI-generiert" als auch „KI-Info anzeigen" angehakt sind. Ist ein KI-Tool eingetragen, steht es in Klammern dahinter, zum Beispiel „KI-generiert (ChatGPT)".

Am einfachsten tragen Sie die KI-Angaben einmal beim Bild im Medienmanager ein, übernehmen sie mit „Metadaten übernehmen" in die Komponente und setzen dort nur noch den Haken „KI-Info anzeigen".

Für den Lizenzhinweis gilt dasselbe: Der Lizenztext kommt über die Metadaten, der Haken „Lizenz anzeigen" wird in der Komponente gesetzt.

Was „Metadaten übernehmen" bewirkt

• Der Haken ist ab Version 12.4.9 vorgesetzt. Wählen Sie ihn ab, wenn die Angaben der Komponente erhalten bleiben sollen. Bis Version 12.4.8 war er nicht vorgesetzt; ohne ihn blieben Alternativtext, Lizenztext und KI-Angaben in der Komponente leer.
• Die Übernahme überschreibt. Alternativtext, Lizenztext, „KI-generiert" und „KI-Tool" der Komponente werden durch die Angaben des Bildes ersetzt, auch wenn dort schon etwas stand.
• Die Bildgröße wird übernommen. Die Komponente wird so groß, wie das Bild Pixel hat. Ein Bild mit 1055 × 1491 Pixeln macht aus der Komponente also eine große Fläche. Passen Sie die Größe danach in der Szene an.
• „Lizenz anzeigen" und „KI-Info anzeigen" werden nicht übernommen. Diese beiden Haken setzen Sie immer selbst.

Bild spiegeln

Ab Version 12.4.9 lässt sich ein Bild spiegeln, ohne die Datei zu verändern. Die beiden Haken stehen im Reiter Layout in der Gruppe Spiegeln; diese Gruppe erscheint nur bei Bild-Komponenten.

• Horizontal spiegeln vertauscht links und rechts. Das ist nützlich, wenn eine Person oder ein Produkt zur anderen Seite blicken soll, etwa zur Mitte des Standes.
• Vertikal spiegeln vertauscht oben und unten.
• Beide zusammen drehen das Bild um 180 Grad.

Gespiegelt wird nur das Bild selbst. Bildunterschrift, Lizenztext und KI-Hinweis bleiben lesbar, ein Link auf dem Bild funktioniert wie zuvor. Die Spiegelung gilt in der Szene, in der Vorschau und in der vergrößerten Ansicht. Die Bilddatei im Medienmanager bleibt unverändert und kann in anderen Komponenten ungespiegelt verwendet werden.

Enthält das Bild Schrift, wird auch die Schrift gespiegelt und ist dann seitenverkehrt.

Wie die übrigen Felder im Reiter „Layout" wirken die Haken sofort in der Szene; ein „Übernehmen" ist nicht nötig. Dauerhaft wird die Spiegelung mit dem Speichern des Standes. Ändern Sie danach im Reiter „Inhalt" etwas und klicken auf „Übernehmen", bleibt die Spiegelung erhalten. Bilder, die vor Version 12.4.9 angelegt wurden, ändern sich nicht von selbst.

Darstellung auf dem Stand

Auf dem Stand erscheinen untereinander das Bild, die Bildunterschrift, der Lizenztext und der KI-Hinweis, jeweils nur, wenn sie ausgefüllt und eingeschaltet sind.

(zu erfassen: Screenshot der Darstellung auf dem Stand)