Image

Use the Image element to show an Image from your Files Library on the page. When you drop the Image element onto the canvas, a window will pop up to select the image from the library that you want to display. If the Image is not yet available, you can do right-click on a folder in the Library to create and upload a new Image, which you can then select.

An Image element has following properties to set:

• Alt Text: the text to show when hovering over the image and which will be displayed if a user has turned off all images in the browser.

• Appearance - Rendering:

  • Default will show the image in its original form;

  • Circle will show the image within a circle-formed frame;

  • Rounded will show the image with slightly rounded corners;

  • Thumbnail will show the image within a bordered frame-outline that has rounded corners.

• Appearance - Responsive:

  • off: use original image dimensions or the indicated height and width values;

  • on: use the available space from the container in which the image element is placed and automatically resize to fit (responsively).

• Appearance - Alignment:

  • Default: no specific alignment set, use the default (browser or custom definition from Design Template);

  • Left: align image element left of the container and enable other elements to float to the right of the image;

  • Center: put image in the center of the container;

  • Right: align image element to the right of the container and enable other elements to float to the left of the image;

• Appearance - Width: only available when Responsive is off, provide a numeric value to use as specific width in pixels; leave empty for implicit (will use original width or the relative width corresponding to the set Height value).

• Appearance - Height: only available when Responsive is off, provide a numeric value to use as specific height in pixels; leave empty for implicit (will use original height or the relative height corresponding to the set Width value).

When Appearance is set to responsive the width and heigth are a maximum size. The image will scale to fit the page untill the maximum height or widht value is reached.