Working with Images in Text Elements

When you are working in a Text Element, the mini tool bar includes an option to insert an Image file, based on where your text cursor is positioned.

Selecting the option opens the Media Browser so you can upload an Image or select one that's already uploaded.

There are two sets of controls for how the image will display within the text element:

• Theme settings for images in text elements
• Inline properties for the individual image once it's added 

On the Theme Designer's Styles tab is a section, Images in Text with settings:

• Constrain Size – Sets whether you want to display the image at its natural dimensions within the text element or limit the display size. If you select the Constrain Size option, you can set two values:
  • Number of Lines – This lets you set the display height of the image, based on the number of lines of text you want it to equal
  • Aspect Ratio – This lets you set the image to display as its natural aspect ratio (dimensions), or as a Square, Standard Ratio (4:3) or Widescreen (16:9)
• Enable Click to Zoom – This sets whether you want the learner to be able to click on the image to see it full size in a modal window (lightbox) over the page.
• Spacing – This lets you set the amount of space (padding) between the image and the text around it, based on a number of preset options.

Once the image is added in the text element you can select it and right-click then choose the Image Properties from the menu or double-click it to open the Image Properties directly.

On the Image Properties you can set:

• Alternative Text - To be read by a screen reader
• Width and Height - These let you set a specific display size for the image. NOTE: These will only apply if the Theme setting Constrain Size is NOT selected.
• Border thickness - Leaving the field empty applies no border, adding numeric value sets a border thickness
• HSpace and VSpace - These set the horizontal and vertical spacing between the image and the border
• Alignment - Setting this to Align Left or Align Right will force the image to the associated side of the text element. NOTE: The text in the element will only wrap around the image if you set the image to Align Left or Align Right. 

Select OK to apply any changes you make to these settings.