How to Insert images using the Rich Text Editor

1. In the Rich Text Editor, put the cursor where you would like to insert the image

2. Click on the Image icon  to open the Image Manager window
   

3. Go to the folder in your website where you want to store your image - then click on the Upload button 
   You can create a new folder by clicking

4. Note: it is not possible to move folders and images between folders so please ensure that you set this up correctly to begin with. The reason for this is because once an image is on the website, there is behind-the-scenes code which says "go into the folder called "meet_the_team" and find the image called dave_brown.jpg and display it here" ... if you were to drag the image of dave from that folder into another folder called "management" then the image wouldn't show up.  For this reason it is not possible to move photos between folders. Should you wish to 'tidy up' your images and folders, you'd need to delete them, re-upload into the new folder and re-insert the image onto the page.  

5. 
   

6. You'll then see your own computer files - find where you have the file saved, and double-click the image that you wish to upload.
   Please note: Image names must only include letters, numbers, underscores and dashes. Do NOT include characters such as $, #, & % etc. Ideally it should not have any spaces in the name. So instead of red shoes 50% off.jpg change to red-shoes-50-percent-off.jpg

7. 

8. You'll see a progress box at the top as your file uploads - you can upload multiple files at once by using shift+click or ctrl+click to select more than one from your computer. A full green bar and 'Done' status shows when the upload is complete.
   

9. Your image will appear as a thumbnail in the folder, and will automatically be selected.
   

10. If you wish to align the image to the left or right hand side of the text, you must specify the alignment from the drop down box, e.g. select 'Left' if you wish for the image to be on the left and the text to be positioned to the right of it
        

11. You should also specify the space above, below, left & right. This is measured in pixels and describes the amount of space between the edge of the picture and the text. A good rule of thumb is to use between 5 and 10 px, but do adjust this according to the size of the area you are working with.
    
        

12. Set 'Alt' text. This is the hidden meta data used by Google and other search engines to find and rank images, so it is important for your websites SEO. Make sure that you describe what the image is of in the 'Alt' box. Be sure to incorporate relevant target search phrases.
    
       

13. Set Title Text if required. The Title area is used if you need to put in some helpful instructions or information that people might need to know when they hover their mouse over the image. For example, you might have an image of one of your products on the home page and the Title text could be "click here to see our range of ducks for sale". Please note - this information is not used by Search Engines.
    
        

14. You may wish to edit your image before adding it to your web page (e.g. resize or crop it). To do this, click .

15. Finally, add the image to your web page by clicking 
    
    You may edit the image properties at any stage by right-clicking on the image and selecting 'Image Properties'.

To delete an image

When you are in the image manager, hover your mouse over the image and you will see a small x appear - simply click on that to delete the image.

It is not possible to delete images in bulk. They must be deleted one by one - this is to prevent the inevitable "slip" of the mouse and the ensuing problems that could cause!

There is no harm in keeping images in the image manager if they are un-used, so if you're not sure whether the image is inserted somewhere on the website, it's better to play it safe and not delete them. Otherwise if you delete an image which is still in use somewhere, it will display a 'broken image' icon in it's place.  

Inserting a table helps to keep images and text aligned

You may have difficulty keeping things lined up and looking good. In this case it would be helpful to use a table. You don't need to have the borders of the table showing - just insert images in one column and put text in the other so it looks good  - see below for an example (we have left the borders there to show you how it works but it would look a lot better without the borders).

	Proin elementum massa non leo tristique egestas. Duis malesuada posuere urna, ac aliquam est facilisis vel. Sed scelerisque, diam sed rhoncus bibendum, velit nulla blandit ipsum, nec lobortis risus magna eget velit. Vivamus imperdiet sem et dolor sollicitudin et ullamcorper urna placerat. Nullam non ligula lacus, ut molestie eros. Aliquam est purus, sollicitudin ac venenatis ac, ultrices aliquam felis.
	Donec felis lectus, vestibulum a scelerisque in, varius eget risus. Donec tempus ultricies orci, id ullamcorper lorem interdum sed. Morbi vulputate turpis sed metus vehicula consequat. Pellentesque fringilla egestas fermentum. In et augue nibh, eget egestas lorem. Vivamus porttitor lig

Click here to find out more about tables

Recycle item images

For catalogue, ecommerce and ecommerce+ websites, you may use the item images in your content. When an item is created, the images associated with that item are automatically resized and optimised. These images are stored in the following folders 'Thumbs', 'Items', 'Large', and 'Originals'
 

Image files

Inserting text before an Image

In the Rich Text Editor, if you insert an image at the beginning of the component, and then later try to insert text before that image, you may have trouble selecting the area before the image to enter the text. To overcome this problem, you can simply select all content in the component by clicking on any area of the Rich Text Editor, and select all (Ctrl + A),  and then cut (Ctrl + X). Then enter the text you wish to enter, click on an area after the text you have just entered, and paste (Ctrl + V) the image and other content you had previously back in.

The basic theme folder

You can find images such as "buttons" and "icons" used in the "template" of your website inside the "Basic theme" folder in the image manager. You can use these images within the content of your website by adding them to the page as you would any image.

IMPORTANT NOTE: Please do not delete or remove any images from this folder, as they are used throughout your website.