7.2 Adding Images To A Form Design

From the Select Multimedia window you can upload images to Resources, browse the files there and enter one of them in your design. Or paste a link to en external image file on the web. Or convert your base64 images to .jpeg image files.

While this functionality is very handy when you are designing forms, you may still want to use Resources in the Dashboard for managing the files, as described in 7.1 Managing resources in the Dashboard.

Add an image to your form design

1. Add a Multimedia Label element to the form design.
2. Go to Properties – Styling and press the button [Select Multimedia].
3. In the Select Multimedia window:

4. Go to the Resource tab and:

• double-click on a folder icon to see the files in that folder
• click on the Home icon (a house) or the Back arrow icon to move through the folders
• select the image that you want and Press the double-arrow if you want to enlarge it.
• press its + button to add it to the form

5. Or go to the Upload file tab and:

• click on the Up arrow button to open the file selector and select a file
• or open the file explorer, select and drag the file you want over to the Up arrow button
• choose which Resources folder to upload the file to: Uploads or Shared folder, or choose “Select other folder” to see and select other folders created in the Resources folder.
• press [Upload file] to upload it and place it in the form element

6. Or go to the Link Image tab and:

• type or paste with Ctrl-V the URL (starting with http://) of the image you wish to insert
• press [Fetch]to add it to your form element

7. Or go to the Base64 tab and:

• paste with Ctrl-V the base64 code for the picture you wish to insert.
  This code will be automatically converted to a .jpeg file.
• choose which Resources folder you want to place the file in: Uploads or Shared folder
• press [Use image]

How to scale and place your image on the page

At the moment the size options in Properties – Styling, below the inserted image, do not work optimally and we apologize for that. We recommend that you use the following grid method to get an appropriate size and placement of the image:

1. After having added the image to the Multimedia Label element, add a grid element to the form.
2. Drag the image element to the grid.
3. Select the image element and change its Span Columns property until you get the size you want.
4. If needed you can also change the Label align property to adjust it within the grid cell.
5. Change grid elements to Spacers where you need a blank space.
6. Remove the grid elements and rows you do not need.
7. Select the grid and type “none” in its Styling – Border property.

In the example pictured above we did all this except removing the grid border. We could have added text elements or other image elements to the same row or grid.