Using the Text and Image editor, you can illustrate your text content with images, creating visually attractive articles and presentation pages.
You have a few options to add an image to your website:
- As an inline element via the Text element, from the Text & Images category
- Via the Image & Text element, where additional images can be added as inline elements
- As a single Image element from the Text & Images category
It is important to note that if you add an image via the Image element, as per the example above, you won't be able to have additional content elements alongside it, such as text or video. This is not the case with the other two alternatives.
There are a few options to upload the desired images:
- Drag & Drop images from local folders or other web pages into the properties panel.
- Browse images from the local files on your computer by clicking inside the add image area.
- Add from URL for an image published on another site. Just copy the address of the image, paste it inside the URL field and click Add Image. (Images with a pound sign "#" or a questions mark "?" in their name can only be uploaded through Drag & Drop or URL)
Another alternative would be to take advantage of our Image Library tab and choose from an array of Stock images.
Once you upload an image it will be automatically set to the default size. Choose from 3 predefined image sizes: small, medium, large and actual or define your own (Custom size). Even though an image may be resized, the system maintains the original image so it can be adjusted later. All resized images will appear with enhanced detail on a high resolution retina display.
Clicking on an image will provide an editing panel with options for customisation, 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.
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 optimise 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 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 optimisation of your website, so it is recommended to add them for key images on your pages.
To further modify your image, you can apply an Image Effect, which will be visible once the change has been saved, by clicking outside of the edited element.
Setting an image alignment and adding a link over the image are some of the other options you have at your disposal. Selecting the icon to add a link, will reveal the following sub-menu at the bottom of the menu on the right.
Adjust the spacing around the image in relation to the additional content in the element by specifying top, bottom, left and right padding in pixels.
You can add a Border to your images by specifying the image Border width in pixels and selecting the desired border colour. Clicking on the Border Colour icon will open a colour toolbox where you can apply or remove the border colour.
Mouse-over images adds the element of interactivity to a site, and can also indicate that something will happen if the image is clicked. This could be useful in cases when link has been added over the image.
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.
The Fade In and Dissolve effects at first glance look very similar, but there is a significant 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.
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 when the Advanced Option are enabled, and the source image needs to be larger than the viewed image.
Images larger than their displayed size will reveal a zoom sliding bar when clicked, allowing you to zoom in and out, and drag and position the image within the specified dimensions. This makes it easy to focus on a specific area as displayed in the example below. Images with a mouse-over variation will display a switch icon at the top right corner when selected. Clicking the icon will enable the complete editing options for the mouse-over image.