In the Input Fields view, you decide how users change an image in your template. An image input field controls an image in the design: users upload their own image in the design generator or choose one. How to create one is explained in Create an input field: let users change a text or image.
You open the settings in the Input Fields view with the gear on the right of the input field and close them with Done. Title, Description and Variable name are the same for all input fields. They are explained in Input field settings.
There are three field types:
- Image: users upload their own image.
- Logo: users upload a logo.
- Image Selection: users choose an image you set.
Image
The default value is the image the element had before.
- Allow image upload from device: users can upload their own image file, as PNG or JPEG.
- Allow image cropping: users can move and crop the image inside the element. The design generator shows an Edit Image button for it.
- Auto-crop to faces: after an upload, centers the crop on the faces in the photo instead of the middle of the image. Only works with the Crop Mode Cover.
- Allow padding: gives users a Padding slider from 0 to 100 to add empty space around the image. It can only be turned on with the Crop Mode Contain. Otherwise the switch is greyed out.
- Integrate cloud service as image library: gives users an image library to choose from instead of uploading their own. Click Add and choose Pexels or Google Drive Folder.
You don't set the Crop Mode (Cover, Contain or Stretch) in the input field but on the image in the properties panel. What the three options do is explained in Image properties.
In the design generator, users see an Upload Image button and, if cropping is allowed, an Edit Image button.
Logo
Logo is a field type of its own for logos. It sets the image to the Crop Mode Contain and turns on Allow padding, so the whole logo stays visible.
Its settings are the same as for Image. In the design generator, the buttons are called Upload Logo and Edit Logo.
Image Selection
Users choose from images you set. How to add the options is explained in Offer a selection: let users choose from set texts or images.
- Image options: the images users choose from. Each option has:
- an image: clicking it opens the Image Library. There you choose an image or upload your own with Upload.
- Crop and Crop Mode: the crop and Crop Mode for this one image.
- Custom label: gives the option a label of its own. When it is on, you type it under Label.
- a trash can that deletes the option. One option always has to stay.
- Add option: adds an option. It is a copy of the last option.
- Type: Dropdown, Button Grid or Carousel. Button Grid by default. When you switch to Dropdown, options without a label get one automatically: "Image 1", "Image 2" and so on.
- Size: the size of the images, Small, Medium or Large. Medium by default. Greyed out for Dropdown.
The default value is the option you select in the input field in the Input Fields view.
In the design generator, users see the images as a grid (Button Grid), as a row to browse (Carousel) or in a dropdown menu. On a phone, the design generator shows a Button Grid as a Carousel.
Face cropping and background removal
Face detection for Auto-crop to faces runs in the user's browser. No image data is sent anywhere for it.
Test the setting in the design generator with photos showing one face, several faces and no face. Keep Allow image cropping turned on so users can fix the result.
Remove background is not a setting of the input field but a property of the image. Remove background: cut out photos from users automatically shows how to use it to cut out photos from users automatically.