Berlin - Components | Image Exchanger

Last modified:

"Image exchanger" is a component that shows an image and, when students click on it, another image is shown.

This component is added within the screens by default (See here) and pop-ups (See here), but it 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.

Image 7050

It is a complex component that contains two images. The component and its images have specific properties. In order to configure it correctly, we should select each element individually. We can select elements from the breadcrumb trail and from the "Structure".

Breadcrumb trail

"Structure" tab

Image 7056

Image 7057

Setup process

1. Configure general "Properties" of this component.

2. Select the first image and access the "Properties" tab. You should at least go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). We can configure an "Alternative text", which will be shown when placing the cursor over the image or when the image cannot be loaded.
Additionally, we can use the "Add" tab, we can add:

  • Credits offering specific properties to define image colours and position (up, down, right, left, etc.)

3.Select the second image and repeat the same process.

Image 7053

4. Finally, we will be able to add a Caption to the component.

Image exchanger Properties




This property allows adding the image position with respect to the central column of contents:

  • Center on content.
  • Overflows right
  • Overflows left
  • Content width
  • Overflows both.


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.


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%.


It allows inserting a component and "wrap" it with a text.

Image 7058

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

Is this article helpful for you?
© 2023 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.