Text and Images - Add and Format Images

 

Using the Text and Image editor, you can illustrate your text content with images, creating visually attractive articles and presentation pages. To add an image, open the Text and Image editor and click inside the text where you want to position the image. Then from the toolbar select the Insert Image icon . An Image upload panel will open on the right.


  

Drag and drop the image directly into the drop zone located in the right properties panel. This mechanism also supports adding mouse-over, table and cell background images.


Alternatively you can also choose File from the drop-down to upload images which are stored locally on your computer. Just click on the Browse button, locate the image and Upload file.


Selecting URL from the drop-down and you can add an image from some online location. Just copy the address of the image, paste it inside the URL field and click Set URL.


Or, click the Library tab and select a stock image.



Once you upload an image it will be automatically set to the default size. Choose from 3 predefined image sizes: small (150px wide), medium (250px wide) and large (400px wide), or define your own. Even though an image may be resized, the system maintains the original image so it can be adjusted later. Also all resized images will appear with enhanced detail on a high resolution retina display.



Clicking on the image will provide an editing panel with options for customization, setting size, border, wrapping styles and effects will open to the right.


You can change the selected image at any time by clicking on the Change button. Choose Edit and the image will open in an external editor where you apply basic image editing such as crop, flip, rotate, resize, and limited special effects.


The Default options will allow you to set custom Image Dimensions by specifying the desired width and height. When changing size, it is recommended to click the padlock icon to constrain the image proportions and prevent distortion. e.g. When we change the width, the height will be adjusted proportionally to ensure both the ratio and perspective remain relative to that of the original image. To return an image to its original size, click the Reset link.


NOTE: Changing the width and size of an image in the editor will only scale the image to the new dimensions visually when the browser loads the page, but the image file retains its original size. To optimize larger images for faster loading, it is recommended to resize images in an external image editing program before uploading the file to the Text and Image editor.


 
  


The Alt Text and Mouse-over caption field allows you to specify some description text related to the image that will appear when a user places their cursor over the image. The rollover captions also have a role for the proper search engine optimization of your website, so it is recommended to add them for key images on your pages.

 

 

With the last default option, we can choose between three Image Alignment and Text Flow styles for each image.

  1. no wrapping
  2. left wrap
  3. right wrap

 

 

Enable the Advanced Options  to access additional editing options.

 


Adjust the Spacing Around Image in relation to the text content by specifying top, bottom, left and right padding in pixels.


 

 

In the Image Effects section we can set Instant Photo and Reflex effects. 

 

 

Note: Image Effects that have been applied will not be visible in the Text and Image editing window.   

 

 

nstant Photo (tilt left)

Reflex (perspective left)


You can add a Border to your images by specifying the Image Border width in pixels and selecting the desired border color from the color icon to the right. Clicking on the border color icon will open a color toolbox where you can Apply or remove the border color.

 


Mouse-over images add an element of interactivity to a site, and can also indicate that something will happen if the image is clicked. This Mouse-Over Image, changes color when we roll over it, and it is also a link. 

 

Create a Mouse-Over Image with Transition effects by uploading a second image file under the Mouse-Over Image option. Once the Mouse-Over Image has been uploaded you can select from a list of Transitions to be used between the two images. 

 

 

Upload Mouse-Over Image

 

Select Transition

 

Image Effects

 


The Fade In and Dissolve effects at first glance look very similar, but there is one very important difference when they're applied to images that have transparent parts. With Fade-in the normal image remains while the mouse-over image fades-in on top and the two are combined. With Dissolve the normal image fades-out while the mouse-over image fades-in on top the two images are alternating. Mouse-over the images below to observe the difference between the two effects.


Depending on the image size you selected, controls are allowing you to adjust images right in the Text and Image Editor. You can easily crop an image and zoom into a specific area of an image without using another tool. The result will be instantly available for viewing and in the context of the page. This feature also applies to mouse-over images. The image crop and zoom feature is available via the Advanced Option switch, and the source image needs to be larger than the viewed image.

NOTES: Instant Photo and Reflex effects are not compatible with the Mouse-Over Image option.
Transition Effects & Browser Compatibility:
1. The "Iris" transition will show rectangles instead of circles in IE7/8.
2. Safari/Chrome users may observe a jump of the Mouse Over image during transition.


 to apply the changes on the page.