Components | Image

The "Image" component allows us to insert an image in the content.

Images are added within the screens by default (See here), but they can also be added inside other components (for example, a Highlight, an Accordion, a Row, etc.).

You will find this component in the group of "Image" components.

Internal components

An image can have three components:

An Instruction located over the image.
Credits offering specific properties to define image colours and position (up, down, right, left, etc.)
A Caption located under the image. This component has the same specific properties than the "Text" component. (In order to learn how these properties work, visit here)

Image properties

PROPERTY

DESCRIPTION

Title Text used to describe the image. This text will be shown when the user places the cursor over the image.

Alternative text

Text used to describe the image. This text will be shown when the user places the cursor over the image. It will appear also when the image does not load.

Resource

Image file that will be displayed. We will click on "Examine" to access the Resources folder in the unit (check here) and select the image we want to show. Supported image formats: jpeg, png, and gif.

Link to popup

It allows converting the image of an interactive element when linking it to a pop-up (See how to create and manage pop-ups in here of the Author's Guide). This is a selective property, which means that if an image is linked to a pop-up, we will not be able to link it to a resource at the same time, for instance.

Link to resource

It allows linking the image to a PDF or ZIP file. We will click on "Examine" to access the Resources folder in the unit and select the file we want to link with the image. This is a selective property, which means that if an image is linked to a resource, we will not be able to link it to a pop-up at the same time, for instance.

External link

It allows linking the image with a URL. This is a selective property, which means that if an image is linked to a website, we will not be able to link it to a pop-up at the same time, for instance.

Width

This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column.

Float

It allows inserting the image and show it "wrapped" by a text.

First, we should select a size percentage under 100% in "Width" property (25%, for instance).
"Float" property allows us to decide where we would like to put the floating image (on the right or on the left of the text).
We use arrows to move the image a place it on the text.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Pop-up window icon position

When an image is linked to an element using "Link to popup", "Link to resource" or "External link", an icon is automatically added to tell students to click on the image.

We can use this property to decide where we would like to place the icon (right-upper corner, left-upper corner, right-lower corner, left-lower corner)

Link icon (40x40)

This property allows replacing the icon currently shown when the image is interactive

The new icon must have 40x40 pixels maximum, and we recommend using a .png file with a transparent background so the icon fits well on the image.

Enable fullscreen This property allows you to decide whether or not the image is displayed in full screen when you click on them (it is designed in this way to facilitate viewing on mobile terminals).

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
Non objetive: this audio will not an objetive to complete the unit.
Interact: It is necessary to click on the image to overcome the objective.

Remember: this functionality is only useful if the image is interactive, that is, when it's linked to a popup, a document or a web page.