Images

When you want to create a new image element, a popup menu opens with a selection of images stored in your Studio cloud. You can upload a new image to your cloud by clicking on the "add image" button. After you have uploaded an image, you can select it from the popup menu.

By default, the image cloud is filtered with the "current project" tag. This means that only the images uploaded while working on this specific project are visible. To access images uploaded in other projects, simply click the filter tag to disable it.

The filter is a safety measure to prevent you from accidentally deleting images that are still in use by other published projects.

You should not delete images that are stored in your cloud and used in a published project or the template will no longer work correctly.

Non-trivial properties

Fill Mode:

The fill mode defines the mechanism by which the image content is fitted into the bounding box that is defined by the width and height of the element.

The content of an image element in a template is often not static, but should be interchangeable by the user of the template. Accordingly, when designing a template, you must always design image elements for unknown content in possibly different sizes. The three fill modes serve you as a tool for this.

In most cases, you will use either Cover Mode or Contain Mode.

Cover Mode

You use Cover mode when you want to make sure that the image content fills a very specific area (without distortion).

Depending on the aspect ratio of the content, parts of the content are cut off at the top and bottom or at the sides (You can give users control over the displayed image section with the Zoom and Image Section Control properties).

Contain Mode

You use the Contain mode if you want to make sure that the entire content is displayed regardless of the aspect ratio.

Zoom:

The Zoom property allows you or rather the user of your template to change the displayed section of the image content within the bounding box of the image element by zooming into the image.

Image Section Control:

The Image Section Control property is only accessible when the image is in Cover mode. It describes the relative range of possible positioning of the image content within the bounding box of the cover mode. The Image Section Control is a useful tool that allows template users to select the displayed image section.

Note that the actual position of the image element does not change with the Image Section Control. Instead, only the displayed image section within the bounding box of the image element is changed.

Sync Mode

Some properties like the Image section control can be toggled between having a one-dimensional or a multi-dimensional value.

The image section control has a horizontal and a vertical component. However, if Zoom is statically set to 1, it makes no sense to control both components individually, because either the width or the height of the source image will fill the frame 100%, rendering at least one of the components of the image section control useless.

Sync Mode sets both components of the Image section control equal, so that they are controlled with a single one-dimensional value.

When Sync Made is enabled, you can connect the Image section control to a number slider input field.

When Sync Made is disabled, you can connect the Image section control to a two-dimensional position input field.

Note that connecting a two-dimensional position input field to the Image section control only makes sense if you also connect the Zoom property to a number slider.

Last updated