The Mediaelement displays an image, movie, or other asset found in the Media folder where you specify in the user interface. Adding media elements can make your UI more attractive or easier to understand through the use of visuals.
These media visuals are static to your user: they are purely for display and do not respond when clicked. For a clickable media element, you can...
- create a field with a select control and refer to media in your select options (as shown below).
- create a button with a reference to media. You can make the edges of your button invisible, so it seems the media itself is clickable (but you're simply clicking a button).
Use
To add a media element, click the "+" next to the component that will contain the media, and select "media".
Media Element Properties
Position
Examples
Examples
| Name | A name which is referenced to on the left tree and rules. The name must be unique to the configurator. |
| Visible | Specifies whether this group and its contents are shown to the user by default or not. This property can be changed in the visibility rules. |
| Image | Browse the Media folder for an image to use, or upload a new one. |
| Max Media Width Max Media Height |
Set the largest width and height for your custom image. The configurator will attempt to render the media at this size, but depending on the screen size of the user's device and other factors, it may be smaller. But it will never be larger. Setting this size larger than the native resolution of the image is not recommended: the image will appear blurry or jaggy. |
If your media is within a container, that media will also have extra Position properties to align it within that container.
Using an image that supports transparency, such as the .jpg or .png image examples here, results in a cleaner look.
Note that Media components do not respond to user interaction, while the images shown in an Image Select field do respond:
Tip: for images that represent choices, try an ImageSelect field
The media element is a great way to give your configurator more visual cues to guide your user. In the example above, we added a "flame" image next to certain choices, to show those choices had a certain similarity (they were spicy).
But if you want to use images to represent choices, try using a field with the ImageSelect or ImageMultiSelect control first. You can get the same effect in an easier-to-maintain structure. Here's an example of one simple multiselect field performing the same job as the complex example using media above:
Best video format: MP4
If you want to embed video into your configurator, we suggest using the MP4 format. As of this writing, it seems to be the most reliable across browsers, operating systems, and hardware (tablets, phones, and workstations).