Im Input Fields View legst du fest, wie Nutzer ein Bild in deinem Template ändern. Ein Image-Input-Feld steuert ein Bild im Design: Nutzer laden im Design-Generator ein eigenes Bild hoch oder wählen eines aus. Wie du eines anlegst, steht in Input-Feld erstellen: Text oder Bild änderbar machen.
Die Einstellungen öffnest du im Input Fields View mit dem Zahnrad rechts im Input-Feld und schließt sie mit Done. Title, Description und Variable name haben alle Input-Felder. Sie stehen in Einstellungen eines Input-Felds.
Es gibt drei Feldtypen:
- Image: Nutzer laden ein eigenes Bild hoch.
- Logo: Nutzer laden ein Logo hoch.
- Image Selection: Nutzer wählen ein Bild, das du vorgibst.
Image
Standardwert ist das Bild, das vorher im Element war.
- Allow image upload from device: Nutzer können eine eigene Bilddatei hochladen, als PNG oder JPEG.
- Allow image cropping: Nutzer können das Bild im Element verschieben und zuschneiden. Im Design-Generator erscheint dafür der Button Edit Image.
- Auto-crop to faces: richtet den Ausschnitt nach dem Hochladen auf die Gesichter im Foto aus, statt ihn zu zentrieren. Wirkt nur mit dem Crop Mode Cover.
- Allow padding: gibt Nutzern einen Regler Padding von 0 bis 100, mit dem sie leeren Rand um das Bild hinzufügen. Lässt sich nur mit dem Crop Mode Contain einschalten, sonst ist der Schalter ausgegraut.
- Integrate cloud service as image library: gibt Nutzern eine Bildbibliothek, aus der sie wählen, statt selbst hochzuladen. Klicke auf Add und wähle Pexels oder Google Drive Folder.
Den Crop Mode (Cover, Contain oder Stretch) stellst du nicht im Input-Feld ein, sondern am Bild im Properties-Panel. Was die drei Optionen tun, steht in Bild-Eigenschaften.
Im Design-Generator sehen Nutzer den Button Upload Image und, wenn Zuschneiden erlaubt ist, Edit Image.
Logo
Logo ist ein eigener Feldtyp für Logos. Er stellt das Bild auf den Crop Mode Contain und schaltet Allow padding ein. So bleibt das ganze Logo sichtbar.
Die Einstellungen sind dieselben wie bei Image. Im Design-Generator heißen die Buttons Upload Logo und Edit Logo.
Image Selection
Nutzer wählen aus Bildern, die du vorgibst. Wie du die Optionen anlegst, steht in Auswahl anbieten: Nutzer aus festen Texten oder Bildern wählen lassen.
- Image options: die Bilder, aus denen Nutzer wählen. Jede Option hat:
- ein Bild: Ein Klick darauf öffnet die Image Library. Dort wählst du ein Bild aus oder lädst mit Upload ein eigenes hoch.
- Crop und Crop Mode: Ausschnitt und Crop Mode für genau dieses Bild.
- Custom label: gibt der Option eine eigene Beschriftung. Ist es an, gibst du sie bei Label ein.
- einen Papierkorb, der die Option löscht. Eine Option muss immer bleiben.
- Add option: fügt eine Option hinzu. Sie ist eine Kopie der letzten Option.
- Type: Dropdown, Button Grid oder Carousel. Standardmäßig Button Grid. Wechselst du zu Dropdown, bekommen Optionen ohne Beschriftung automatisch eine: „Image 1“, „Image 2“ und so weiter.
- Size: Größe der Bilder, Small, Medium oder Large. Standardmäßig Medium. Bei Dropdown ausgegraut.
Standardwert ist die Option, die du im Input Fields View im Input-Feld auswählst.
Im Design-Generator sehen Nutzer die Bilder als Raster (Button Grid), als Reihe zum Durchblättern (Carousel) oder in einem Dropdown-Menü. Auf dem Smartphone zeigt der Design-Generator ein Button Grid als Carousel.
Gesichtszuschnitt und Hintergrund entfernen
Die Gesichtserkennung von Auto-crop to faces läuft im Browser des Nutzers. Dafür werden keine Bilddaten übertragen.
Teste die Einstellung im Design-Generator mit Fotos mit einem Gesicht, mit mehreren Gesichtern und ohne Gesicht. Lass Allow image cropping eingeschaltet, damit Nutzer das Ergebnis korrigieren können.
Remove background ist keine Einstellung des Input-Felds, sondern eine Eigenschaft des Bildes. Wie du damit Fotos von Nutzern automatisch freistellst, steht in Hintergrund entfernen: Fotos von Nutzern automatisch freistellen.