Adding Text and Images to Your Pages

Article Written by Scott McPherson from Tempus4 Design

Getting all your content onto your pages can be simple but there are a few things you need to know first. Read through this article and you'll avoid the pitfalls and soon be turning out pages like a Pro!

Lets introduce the Editor

The "Editor" as we call it is really just like Microsoft Word with a lot of similar functions. It allows you add text and pictures and then format them just like you would in Word.

The Editor is pictured below;

Now before we get into the talking you through an example you should read the following;

Things to Avoid!

Don't write your text in the Editor - Why? - Well, most website hosting companies have a "Session time" of 20 minutes. What this means to you is that when you log into a website and you don't change page for 20 minutes the host thinks you've gone away and logs you out. Now if you had just spent 21 minutes writing the most incredible piece of text ever you'd be a little unhappy if you lost it all when you hit the submit button. So the moral is prepare your text first and then format it in the Editor.

Don't copy from a webpage straight into the Editor - Why? - Often when you copy from a webpage you can inadvertently copy information that you don't really want as it can cause pages to give errors or simply look bad. An experienced web programmer can do this as they know what to remove but this method is still a bit dodgy.

Another issue with this is that the images you copy aren't actually on your site as they just link back to the site where they come from.

This may not seem like such a problem but if they change the name or position of the images on their site all the images appearing on your site will show "missing image" errors.

Don't copy from Word unless you use "Word Paste" - Why? - For some of the same reasons as above as word often adds some formatting that can cause problems. As there is a very good chance you will write your text in Word you need to make sure that when you come to pasting it into the Editor that you use the "Paste from Word" button

A Standard Example

In the following example we'll take text and images from a product on your suppliers website and eventually build your own nicely formatted page. Note: This example assumes you have permission to use the images and information from the website owner.

1. Getting Images - First go to the page and copy all the images to do with the product by "right mouse click -> save picture as" on each image and save all the pictures to a relevant location on your computer. See example animation HERE
2. Getting Text - Then click and drag your mouse over the area containing the text and "Edit -> Copy" then open Word and then "Edit -> Paste Special" and Choose "Unformatted Text" from the list. See example animation HERE
3. Note: If you're using the editor to create a new product or article then the next step is to add a new page (From the Admin pages in the relevent menu click "Add") and add the basic details to it.
4. Adding Structure - We then add some structure to the Editor section so we can neatly add the text and images afterwards. See example animation HERE
5. Paste Text - We then copy and paste the text into the relevant sections. See example animation HERE
6. Add Images - Then we add the images by clicking in the cell that you want the image to go, then click on the "image" button and then click on the "asset manager" button. When the asset manager opens you first upload the pictures you have to your website. Then you choose the relevant image from the list and click "OK" See example animation HERE
7. Add Style - Finally we format the text and cell and then "Submit" the page. See example animation HERE

Some Other Tricks

Adding a link is a simple process of finding the page you want to link to then copy the text in the "Address Bar" , then select the text or image in the Editor that you want to be used as the link, click the "Hyperlink" button then paste the address bar text into the top right box of Hyperlink popup and click "Insert" See example animation HERE

Adding Pictures within Text can give some great looking results and it's so simple to do. First you click on the left side of the text and then click the "Image" button and then the "Asset Manager" button to find the image you want to insert. Once selected you then choose the alignment of the image (say right) and then decide how close the text is from the image by adding spacing. Then click "apply" and then "ok" . See example animation HERE