Adding an Image to your calculator
Adding images to the calculator improves how it works and makes it easier to use. These images can be used in different ways, like showing data, explaining ideas, or giving clearer instructions than just text. Plus, having images makes the calculator look better, which makes using it more enjoyable. Adding images to the calculator is available for premium plans only.
This tutorial explains:
01 Adding images to the calculator
The Image element allows you to add an image to the calculator as a separate element. It is useful when you want to add a logo or a marketing banner to your calculator directly. Image element can be added to a calculator via the Add New Element dropdown menu.
The Image element itself is not interactive and does not carry any numeric value, it is mainly a cosmetic element!
An example of how an Image element can be used in a calculator
☞Use this calculator template as basis for your own custom crypto profit calculator
Element settings
- The Element Label input field lets you name your element. The toggle controls whether the label is visible or hidden.
- The Element Tooltip is a text field that lets you give more context to each element or explain what information you require to input. Once enabled, it will appear as a small info icon next to the element title.
- The Upload Image button allows you to browse image files on your device. Allowed image formats are: jpg, jpeg, png, gif, animated gif, svg, webp
- The Image style controls how an image is scaled and positioned within the element (read more below).
Image style and alignment
There are three possible image style options:
Default: The image retains its original size, image can overflow or have empty space if the element size differs. It does not automatically resize or reposition within the element.
Cover: The image is scaled to cover the entire element, potentially cropping it. You can control which part of the image remains visible when it is cropped:
Horizontal Alignment:
- left: Keeps the left part of the image visible when cropping.
- center: Centers the image horizontally, cropping equally from both sides.
- right: Keeps the right part of the image visible when cropping.
Vertical Alignment:
- top: Keeps the top part of the image visible when cropping.
- center: Centers the image vertically, cropping equally from top and bottom.
- bottom: Keeps the bottom part of the image visible when cropping.
Contain: The entire image fits within the element, potentially leaving empty space around it. You can align the image within this space:
Tips:
- It is recommended to play around with different styles to find out which one is the best for your use case.
- If you want your image to not have white borders, turn off the label and set the image element padding to 0.
- You can make the image smaller by resizing the whole element. Do that by dragging the corner of the element with a little arrow.
02 Images as selectable options
There are two elements that can have image elements as selectable options: Radio Box and Checkbox. Radio Box element allows to create a list of predefined selectable options and then select one of those options. This element does carry a predefined value for each selected option. Checkbox element has one selectable option with two states, checked and unchecked, which both carry a numeric value. Multiple Checkbox elements can be added to create a list of multiple possible option selections.
Radio Box element
You can add images to each of the options in the radio box element for users to choose from. These image options carry a numeric value and can be used in formulas. It can be useful when you need to show product or variation visuals to the users.
An example of how image options look like in the radio box element
☞Use this calculator template as basis for your own custom car rental calculator
NOTE: For guidelines on simple, label only options and the rest of element settings, check out an article about Radio Box element
How to add images to your Radio Box options?
- Turn on the Use Images toggle in the Radio Box element settings.
- Click the options menu and upload an image using the Upload Image button. Other possible option settings include:
- Changing the Options Label – the text that will be displayed to your calculator users.
- Assigning the Option Value that will be sent to the formula if users choose that particular option.
- You can change the Order of the options you added to your radio box by clicking on the arrows on the right side of each option.
- Deleting an option by clicking the Delete Option button.
Image settings
Once Use Images is turned on, the Image settings panel will be available on the right side. Click on it to expand it. Radio Box element image settings include:
01 Option Style
- Overlay - Radio button and label are on top of the image.
- Inline - Radio button is on top of the image while the label is under the image.
- Separate - Both radio button and label are under the image.
02 Images per row
This settings allows to set how many images will appear in one line of the element. All other images will be moved to the next line. Each of the three breakpoints has a maximum number of images that it can have in one line which has to be set up separately.
- Laptop - 8 images max in one line.
- Tablet - 6 images max in one line.
- Mobile - 4 images max in one line.
03 Image style
Cover: The image is scaled to cover the entire option space, potentially cropping it. You can control which part of the image remains visible when it is cropped:
Horizontal Alignment:
- left: Keeps the left part of the image visible when cropping.
- center: Centers the image horizontally, cropping equally from both sides.
- right: Keeps the right part of the image visible when cropping.
Vertical Alignment:
- top: Keeps the top part of the image visible when cropping.
- center: Centers the image vertically, cropping equally from top and bottom.
- bottom: Keeps the bottom part of the image visible when cropping.
Contain: The entire image fits within the option space, potentially leaving empty space around it. You can align the image within this space:
Horizontal Alignment:
- left: Aligns the image to the left edge of the element.
- center: Centers the image horizontally within the element.
- right: Aligns the image to the right edge of the element.
Vertical Alignment:
- top: Aligns the image to the top edge of the element.
- center: Centers the image vertically within the element.
- bottom: Aligns the image to the bottom edge of the element.
04 Image aspect ratio
Image aspect ratio setting sets the proportional relationship between the width and height of an image.
- 1:1 (Square) - The width and height of the image are equal.
- 2:1 (Widescreen) - The width of the image is twice its height.
- 4:3 (Standard) - The width is four units and the height is three units.
- 3:4 (Portrait) - The width is three units and the height is four units, essentially the portrait orientation of 4:3.
- 1:2 (Tall) - The width is half the height.
Tip: It is recommended to play around with different styles to find out which one is the best for your use case.
Checkbox element
Checkbox element has one selectable option with two states, checked and unchecked, which both carry a numeric value. Multiple Checkbox elements can be added to create a list of multiple possible option selections.
An example of how image options look like in the checkbox element
☞Use this calculator template as basis for your own custom home renovation calculator
NOTE: For guidelines on simple, label only options and the rest of element settings, check out check out an article about Checkbox element
How to add images to your Checkbox?
- Turn on the Use Images toggle in the Checkbox element settings.
- Upload your image using the Upload Image button.
Image settings
Once Use Images is turned on, the Image settings panel will be available on the right side. Click on it to expand it. Checkbox element image settings include:
01 Option Style
- Overlay - Radio button and label are on top of the image.
- Inline - Radio button is on top of the image while the label is under the image.
- Separate - Both radio button and label are under the image.
02 Image style
Default: The image retains its original size, image can overflow or have empty space if the option size differs. It does not automatically resize or reposition within the option space.
Cover: The image is scaled to cover the entire option space, potentially cropping it. You can control which part of the image remains visible when it is cropped:
Horizontal Alignment:
- left: Keeps the left part of the image visible when cropping.
- center: Centers the image horizontally, cropping equally from both sides.
- right: Keeps the right part of the image visible when cropping.
Vertical Alignment:
- top: Keeps the top part of the image visible when cropping.
- center: Centers the image vertically, cropping equally from top and bottom.
- bottom: Keeps the bottom part of the image visible when cropping.
Contain: The entire image fits within the option space, potentially leaving empty space around it. You can align the image within this space:
Horizontal Alignment:
- left: Aligns the image to the left edge of the element.
- center: Centers the image horizontally within the element.
- right: Aligns the image to the right edge of the element.
Vertical Alignment:
- top: Aligns the image to the top edge of the element.
- center: Centers the image vertically within the element.
- bottom: Aligns the image to the bottom edge of the element.
Tip: It is recommended to play around with different styles to find out which one is the best for your use case.