keyboard_arrow_left Back to Knowledge Base

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 Image element use case

Use this calculator template as basis for your own custom crypto profit calculator

Element settings

Customizing an Image element

  1. The Element Label input field lets you name your element. The toggle controls whether the label is visible or hidden.
  2. 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.
  3. 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
  4. 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:

Vertical Alignment:

Contain: The entire image fits within the element, potentially leaving empty space around it. You can align the image within this space:

Tips:


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 Image option in 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?

Customizing a Radio box element option images

  1. Turn on the Use Images toggle in the Radio Box element settings.
  2. Click the options menu and upload an image using the Upload Image button. Other possible option settings include:

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:

Customizing an image

01 Option Style

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.

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:

Vertical Alignment:

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:

Vertical Alignment:

04 Image aspect ratio

Image aspect ratio setting sets the proportional relationship between the width and height of an image.

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 Image option in radio box 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?

Customizing a Checkbox element option images

  1. Turn on the Use Images toggle in the Checkbox element settings.
  2. 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:

Customizing an image

01 Option Style

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:

Vertical Alignment:

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:

Vertical Alignment:

Tip: It is recommended to play around with different styles to find out which one is the best for your use case.

Build calculator for free!