Content Box - Adding an Image

Adding an Image

When adding an Image to the content, click the image button. 

To inset a file click ‘Browse Server’. From the window that opens select an image that has been previously uploaded or click 'Upload' to use an image that is stored on your local device. 

Double click on the image you want to use to select it, close the pop-up and return you to the image properties window.

Image Properties

There are a few properties in this window that can help you to present your image attractively within your content.
The preview shows what your image would look like with sample text (Lorem ipsum) around it. The image may look distorted in this preview box.

Alternative Text
Write a short description of the image. This is helpful for users accessing the site with screen readers. If you do not complete this field it will be flagged by the Accessibility Checker if you check your content.

Aspect Ratio/Resolution
The width and height fields control the aspect ratio and resolution of the image.
The original height and width values of the image are shown initially however the easiest way to add your image in a responsive way is to enter a percentage value in the width field. The height value should be left blank. The will ensure the image fills the set percentage of space regardless of the device that it is being viewed on.  

If you would like the image to sit across the whole screen just enter 100%.

Border & Spacing
Entering the number 1 into the border field will create a 1px wide solid black border around the image. Increasing the number entered increases the width of the border.

The HSpace and VSpace
These fields pad the text away from the content, it means the text will stop a bit before the image and usually looks a lot neater.
We would recommend entering 5 for both of these fields if you are embedding an image within some text.
As with the border, increasing the numbers entered into these fields increases the number of pixels of space the image has around it.

Alignment
Alignment can be set to 3 different settings. Not Set, Left & Right.
Not set makes the image sit above or below text.
Left or Right sets the image in-line with the text, with the image at the left or right depending which is set

Still need help? Contact Us Contact Us