Adding a picture

You can add a picture if there are already interfaces in the node. If there is an interface, the picture button [Layout > Picture] will be enabled:

Picture button in the top menu
Picture button in the top menu

If you press the button, you will be asked to select a picture, (the picture format can be .gif, .jpg or .bmp). The selected picture will be copied to the subfolder <modelname>_images, to make sure it can be automatically uploaded to the Web Server on publishing.

The picture will be shown in the Preview window. There you can select the picture to move and resize it, like you would do in Word. If you are not able to resize or move the picture, please make sure that the interface is not locked. Moving the picture in this way only affects the Runner, not the user interface where your users will be interacting with your model.

Placing the picture within the node

Following the method above, the picture will be rendered at the very bottom of the node, after the last interface (question or text). If you need to have the image placed at a particular spot between some other interfaces, you need to follow these steps:

  1. In the preview pane, select the image you just added, then in the top menu click on Actions --> Delete This will remove the image from the preview, but not the server.

  2. Create a text interface and write a markdown image syntax within. The syntax is:

![Alt text for image](imagename.extension?filemodelname=modelname)

So for example, if the picture we just added was named ‘rainbow.jpg’ and the model was called ‘test.mdl’, then the syntax would be:

![Rainbow picture](rainbow.jpg?filemodelname=test)

  1. Now the image will be rendered within that text interface, and like any other interface, you can move it up or down in the Actions pane.

It’s important to note: Your UI (presentation layer) must support markdown - if not, please contact us to add that support.

Image size

In both of the above methods, the image will be rendered on screen in its original size, with a maximum width of the available space where it’s rendered. So, if the picture is 20x20px, that’s how big it will be on screen. If the picture is 1000x1000px, it will likely be scaled down so that it doesn’t overflow its parent element. This is however, dependent on the design of the UI.