Adding and editing page content

Written by Jane Atkinson on . Posted in Documentation

How to add images, link material from other sites, and more


How to use the WYSIWYG editor

The editor is a window, rather like a word processor built into your website, which lets you edit text without needing to know HTML code.

There's a very comprehensive user guide at

If you want to actually experiment with the editor without fear of doing any damage, there is an online demo at


Other languages

For page content you can use a language other than English that is supported by the UTF-8 character set for Redhat Linux EL5. This includes languages using non-latin characters.

There may be slight differences between computers, depending on their age and the software used.


Using your own images in pages

Start by creating your image locally (on your own computer) and make sure it is sized correctly – the size you want it to appear on your website.


To Upload Your Own Images

1) Click the "image button" on the editor. It is the one that looks like an outdoor photograph (under the "Source" button)

Image insertion and editing icon in toolbar


2) The "Image Properties" window will pop up. Click the "Upload" tab.

Uploading a picture


3) Click the "Browse" button, select your gif, jpg, or png file, then click the "Send It To Server" button. You will get a success message when completed.

Upload successfully completed

4) Click the "Cancel" button to close that window. Now the image will be in your custom image library, ready to insert.


To Insert Your Own Images

1) Place your cursor where you want the image to be inserted.

2) Click the image icon.

Image insertion point


3) Click the "Browse Server" button.

Browse the server


4) The image library window will pop up and your custom image pane will be open by default. Click on the image you want inserted, the window will close, and your image will be inserted.

Directory of images


(Note: to insert an image from the stock "Toastmasters Image Library", just click on that tab, then click on the image you want to use.)


Adding images using drag and drop

The above upload procedure still works, but you may find it easier to drag an image from your computer desktop or file manager and drop it into the editor. The image is uploaded for you. Then you can proceed to resizing and positioning your image as described below.

Unless you are using Firefox, you can't yet copy and paste an image into the editor from your computer desktop or file manager. You can, however, copy and paste from other sources.


Resizing and positioning images

Once your image has been added to the page, you may wish to change its size, put a border around it, and/or position it to the left or right of the page and have text flow around it.

Click on the image and then on the image icon in the toolbar (arrowed in the first image above). A dialogue box comes up.

Adjusting the size and layout of a picture

If necessary, click on the Image Info tab.

To resize the picture, make sure that the lock (inside the red circle) is closed before doing anything else. Click on it if necessary. Then type either the width or height in the appropriate box.

You would only have the lock unlocked if you are deliberately wanting to distort an image.

If you've already distorted your image and want to start over again, click on the reload icon (circular arrow - also in the red circle) to reset. Then resize as described above.

If you would like the size of your image to automatically adjust for various screen sizes (e.g. viewable on mobile phones), then enter a percentage (e.g. 80%) for the width, but leave the height blank. Your browser will automatically resize the image for various screen widths without distorting the image.

If you want a border around the image, enter the required border thickness (in pixels) in the border box. If you're not sure, use "1".

The HSpace and VSpace define the gap (in pixels) between the picture and the text, in the horizontal (HSpace) and vertical (VSpace) directions.

Align gives you a choice of having the picture to the left or the right of the text, with the text flowing around it, or not set. Not set means that the text will not flow around the picture.

If you want a centred picture, make sure that it's in its own paragraph, and then set text alignment to centred.

Important: Please enter something descriptive in the Alternative Text box, to help those who are unable to view the image. In addition, Google considers this to be an important feature when ranking pages.


Rotating images

Sometimes, you may insert an image in you page and discover that it's lying on its side, or even upside-down. Using this tool, you can quickly and easily re-orient the image.

Rotate image

Choose "Rotate image" in the Web Page Tools pull-down menu.

Choose angle of rotation

Choose the image from the pull-down list, then choose the amount of rotation you need and click Rotate Image/Photo.

Note: You can only choose increments of 90 degrees. You can't use this tool to create other angles of rotation. If you wish to do that, you'll need to use an image manipulation program.


Swapping out an image for a new one

From time to time, you'll want to replace an existing image on a page with a new one. This tool allows you to do this in a single operation.

Replace image

Choose Replace Image/Photo from the Web Page Tools pull-down menu.

Replace image selection panel

Select the existing image you want to replace in the upper pull-down list, and select the replacement image in the lower pull-down list.

If the image you want to replace isn't on the server, you can upload it from your computer with the Upload Image button.

There is also an option to delete the original image from the server, if it is one that has previously been uploaded to your site. (You cannot remove system images.) If you're going to do this, make sure that you have a backup somewhere, in case you need it again in the future.


Removing images


When images are no longer needed, ensure to remove the image from your page first THEN delete it from your library.

Otherwise, your browser will try to display an image that does not really exist.  This may cause your website to load vary slowly or not at all.  You may need to ask an admin to reset your website in this case. This is an especially bad situation to be in on the day of a club meeting.


Linking to other sites


Doing it this way takes users to a completely different site. If you'd prefer that they stay on your club website, see the next section.


Incorporating material from other sites

You can do this by creating an IFrame. This is a special window in which material from the other site will appear. The user does not need to click on a link and they will not be taken away from your site. Google maps are a common use of IFrames.

To insert an IFrame you can use the IFrame tool. Click on the iFrame buttonIFrame button:

iframe button

Then enter the details in the window.

Iframe dialogue box

The height and width figures define the dimensions of the frame. You may need to experiment with them to get the effect that you want.

You won't see the content of an IFrame when you are editing the page, only a rectangle of the relevant size.

Once you have finished editing, save and close. To see the final effect, choose the page from the menu.


Checking for bad links

Broken links cause annoyance and detract from the value of your page. They also slow down page load performance, particularly in the cases of images. This item gives you a quick and easy way to check for them.

Check links option

Choose Link Checker from the Web Page Tools pull-down menu.

Check links option

You'll be shown a list of working links, plus any that aren't working properly. Anything in the second list needs to be removed or fixed.  Note that this also will include any image references that are broken--if you deleted an image in the wrong way, for example.


Insert Web Page Variable

Web page variables are items that will update automatically as the information changes. They are especially useful for dates, such as the next meeting date, which change regularly.

Select a variable from the pull-down list and, depending on your browser, it will be copied to the clipboard.

  • Some browsers don't use this function. If the variable isn't copied, you can enter it yourself, making sure that it begins and ends with two curly braces.

The variable will still be visible in the page editor window after you've saved. To see the end result, close the editor.


Google ranking

For the basics on doing well in Google search, see

For further information from Google itself, see


Do remember, though...

Google is only one way that people find your website and your club. Don't rely on it to the exclusion of other methods. For example, you might find that most of your contacts are word of mouth, or come from a link on your District site.

How to find out? Ask visitors where they heard about you. Then put most of your efforts into making sure that these things are working well.