Example of a image picker field used to toggle the frame styling of a poster.
Image picker is a Custom Input Field type that allows customers to choose between a list of different images. When the customer chooses one of the images from the list, the linked elements of your design will be updated.
Another example of a image picker field used to let customers choose what pin to place on a map.
A image picker field can consist of multiple dynamic elements, also known as variables. That can be linked to elements on the designs, the dynamic variables are as follows:
- Images
- Texts
- Colors
- Fonts
The variables tab of the image picker settings.
Adding a image picker to your design
To add a image picker to your design you need to click the Add custom field on a design in the design studio. This will open the Custom Field modal as shown on the image above. Here you need to select the Field Type Image Picker from the list.
The three tabs of the image picker settings.
Now you will see the three setting tabs of the image picker settings.
- Basic settings tab: Name of the image picker.
- Variables tab: Where the different variables (images, texts, colors, fonts) are defined.
- Options and values tab: Where the different options and variable values are defined.
The variables tab is where you define all the variables that change when the customer clicks a image from the list. These can be of the types image, text, color or font. For example of you add a color element, this color element can be different for each image on the list.
When variables are defined, the options and values tab is where you define the different options that the customer can choose from. It's also here you define the image shown to the customer, in Posterly this is known as the option image, while the values are called option values.
The options and values tab.
In the example shown above, pin options for a map is shown. The option values consist of an image as well as a text. The text is what is shown to the customer in the cart, and could also be used for conditional rendering as well.
The second option value is the pin image. The reason that you can have an option image, as well as an image as a option value, is that the image you show the customer is not always the same as the image you want in your designs.