Working with Images

With the WYSIWYG (what you see is what you get) editor, you can insert images as well, giving some colour to your website, BUT if you do not resize the images before you upload them, it can REALLY slow down your site!

If you uploaded an image, and the make it smaller by dragging the small blocks in the corners, this does not actually make the file size of the image smaller - it basically just "tells" the browser to display the image at that size - the original file size is still like it was when you uploaded the image, which can really slow down your website if the images are really big.

The best way to go about this is to make the pictures smaller BEFORE you upload them (remember to make a backup of the image first, and then make it smaller...)

A very nice little utility is actually one by Microsoft, and best of all, its free! There are actually a few of these handy little tools, but the one we can look at is the Image Resizer.

Click here and you will see a whole list of stuff, and on the right side of the page, you will see a link to download the image resizer (about 2 thirds of the way down...) - so download that, and install it.

What this tool does, is it adds an entry to the right click menu when you are browsing through your files. First, select the image/s you want to resize, the rightclick on them. It will look similar to this (in Windows XP that is...):

Note: you can select more than one picture at a time if you want to resize them all to the same size...

Clicking on Resize Pictures will open up a very simple to use dialog box that looks like this:

As you can see, pretty straightforward. Anyway, I always click the Advanced >> button, cause I'm usually not happy with one of the default sizes - this makes the Resize Image dialog look like this:

Go ahead and select the Custom option, and then just manually type in the size for the image. I usually make pictures that go on a website 400 pixels or so wide - width is the first of the two text boxes (height doesn't matter in this case). 

If you made a backup of your original image, you can go ahead and tick the "Resize the original pictures (don't create copies)" checkbox, but it's safer to just leave it unticked...

Click OK, and a copy of the image will be made, and that one will be resized (unless, of course, you ticked the Resize the original... checkbox), quickly and easily! Now it will be ready to go on your website. It will load nice and quick, which is something that your visitors will like!

Creating bookmarks

To create bookmarks with the RGCMS is also very easy. Just note, in web design terms, bookmarks are called "Anchors". So the short and sweet of creating a bookmark on a site is basically this:

1. Create an Anchor (this is where you want the page to jump to)
2. Create a Link to that Anchor.

That sums it up. Heres the step by step on how to actually do this:

When adding or editing the page, you'll see a screen like this (only with your own content of course...):

Now, place the cursor where you want the bookmark (Anchor) to be by clicking somewhere. In this tutorial we're making it before the M of the heading (don't select any text). Then, click the Insert/Edit Anchor button:

This will bring up the following dialog:

Now, simply type in a name for the Anchor, for example "Top", then click the OK button at the bottom.

This will bring you back to the editor, with the anchor placed where you clicked:

As you can see, it shows a little Anchor icon where the Anchor was placed. Note, you won't see this icon on the actual page.

The next step involves placing a link to the anchor. For this one, we want a "Back to top" link at the bottom of the page:

Now, select the text you want to link to the bookmark (in this case "Back to top"):

Then click on the Insert/Edit Link button:

which will bring up the Link dialog box, that looks like this:

Under the Link Type dropdown box, select "Link to anchor in text", which will then change the screen to look like this:

Now, select the Anchor you made in the "By Anchor Name" dropdown box:

Note: if you have more than one anchor in the page, you'll see them all in this drop down box. Anyway, now you can click the OK button, and voila! You just created a link to a bookmark on your page.

Remember to save the page after you've done editing it!

Creating a link to a file (Like a PDF or Word Doc)

Creating a link to a file like a PDF or Word Document is, just like regular and email links, really straightforward to do.

First off, select the text (or image) you want the site visitor to click on to download the file:



Now click on the Insert/Edit Link button:



Remember, the layout you see might be different, depending on which version of the CMS you have.

This will bring up the Link Dialog box:



Now, obviously we need to get the file from your computer onto your website. This is, fortunately, very simple indeed. Go ahead and click on the Upload Tab at the top of the Link Dialog screen:



No, simply hit the Browse... button, which will let you select the file on your computer that you wish to upload to your website. As soon as you have selected the file, it should show in the box next to the Browse button. Now, click on the Send it to the Sever button, and after a short while (depending on how big the file is) it should display this message:



and will bring you back to this screen:



As you can see, the Protocol was put on "other" automatically, and the name of the file has been entered into the URL box. Simply click OK, and the file is linked!

And remember to save!

Making an Email link

So, you want to make a link that opens up the relevant email program (Outlook Express for example) when you click on it - this is really easy to do.

It is very similar to creating a link to another website:

Firstly, select the text you want to make the link:



Then click on the Insert/Edit Link icon:



Remember, the arrangement of your icons may be different from the screen you see above...

Anyway, this brings up the Link Dialog box:



Now, to make an email link, be sure to select Email under the Link Type drop down box. This will change your Link Dialog screen to something like this:



Now, just fill in the blanks, and click the Ok button. Its usually a good idea to leave the Message Body part empty, but that is just a personal preference.

And once again, remember to save the page!

The CMS Photo Galleries

This is just a quick explanation of how photo galleries work on your RGCMS...

The default version of the gallery are basically three levels deep.

The top level is Galleries - You can create several galleries for your cms - this can be something like Weddings, Parties, Functions, etc. (if you're a photographer for example) - or whatever you want. More often than not, one gallery is enough, but, as you can see there are extra room for more.

The second level is Albums - Each Gallery can basically any number of Albums in it. So, for example, your Weddings gallery could have a John and Sue album, a Peter and Jane album, etc.

Then, the third level is Photos - Each album can basically have any number of photos in it.

That's the short and sweet of how the Galleries work!

Adding an image

Adding an image to your page is more or less the same as adding links, with a few minor details different:

First, click where you want to add the image, then click on the Insert/Edit Image button:



What you see on screen may be slightly different, but the idea remains the same. Anyway, this will open up the Image Properties Dialog:



Once again, what you see may be slightly different. Now, the easiest way to add a new image is by click on the Upload tab at the top, then click Browse to browse for the picture you want to upload, and click Send to Server:




Depending on the size of your image, it can take a while before the Image uploaded successfully screen shows:




This will bring you back to this screen, but now you'll see some of the text boxes have been filled in, and you'll see an example of how your picture will look inside your text:



Now, there's all kinds of properties you can set. Here is a summary of what they do:

Alternative Text: This is a short, optional, description of the picture. You usually see this when you hover your mouse pointer over the image.

Width and Height: This is the size in pixels that the image will be displayed on screen when someone views the page. As you can see, these values are automatically filled in to the actual sizes of the image you uploaded. If you want, you can change this, but its always a good idea to have the image you are uploading be the actual size you want it to display on the site. Especially true if the image is HUGE and you make the height and width properties smaller - the image will still take quite a long time to load.

Border: if you want a border around your image.

HSpace and VSpace: This is white space around your image so that any text is not touching the image. HSpace is the space to the left and right of the image, and VSpace is the space to the top and bottom of the image. Play around with the values and see what effect it will have. (usually a value of 10 or more is a good idea)

Align: Use this if you want the picture to be "inside" your text. Also, experiment to get the best setting you want.

After you have edited the properties of the image, click the Ok button, and voila! Your image is now in your page. Just remember to save the page after making any changes!

Linking to another website

If you want to make a link to another website with the What You See Is What You Get (WYSIWYG) editor, that is actually very easy and simple to do.

First, select the text or image you want the visitor to click on to follow the link:



Your screen might look a bit different than the above image, but the basics remain the same...

Anyway, now click on the Insert/Edit Link button, its icon is a picture of a chain link:



This will open up the Link Dialog box (graying out the background):



If you are linking to another website, simply enter the address in the URL box (like www.rgtwebhosting.com) and click OK at the bottom. This will turn your highlighted text or image into a link that can be clicked by your visitors.