While filling out a form, the user wants to add the image directly. However, for your report, it may sometimes be more convenient to display the images in an attachment. You can achieve this by moving the images.
Moving an image via the Image element
In the article "How do you let the user add an image or photo?" you can read how to let the user add the photo in the form. For this article, we assume you already know how this works. To move the image, use the same image element. However, change the 'Input mode' to 'Linked to other images element.' You will then see the following screen.
Linked images element (alias)
In this article, we will not go into the other fields, as they work exactly the same as in the article "How do you let the user add an image or photo?".
To move an image, you need another image element where the user can add images or photos. It is important that the other element has been given an alias. In the article "Use aliases to link data" you can read all about it. Here, for example, you specify '@image.' This means that in the linked image element, you have specified the alias 'image' in the 'Display settings.'
How does it work further?
When the user adds an image or photo in the image element, it will automatically be copied to the linked image element.
Tip 1: Do you only want to show the copied image(s) in your report? Then set the linked image element to 'Hidden' in 'Visibility (document).'
Tip 2: Do you not want to see the copied image(s) in your draft but do want to see them in your report? Then set it to 'Hidden' in 'Visibility (draft).'
Moving an image via text
It is also possible to move a user-added image via the static text element. Read the article "How do static components and elements work?" for more information about the element itself.
In the rich text editor, you can now use the previously mentioned alias to move the image. It is not possible to determine the aspect ratio of the images or to place a border around the images this way. However, you can specify how much available space they should occupy. You can use the table below for this.
So suppose you want the image to occupy 1/3 of the available space, and you used '@image' as the alias for your image element. Then you get the following text in your rich text of the text element:
