• RIBI home page

Adding Picture & Files to your Reports

Good pictures will help bring your website alive. There is a resource on the RIBI website that isn't widely know about - the Image Gallery. It contains a number of pictures on different topics that can be used to enhance your website; Polio Plus, Foundation, Preferred projects etc - I'm hoping this resource will continue to grow.

Using the HTML Editor

The Editor is used throughout the admin sections to easily create attractive pages, without any need for knowledge of HTML coding or other web skills.

Remember, there is a server time-out in place, so if there is no requested activity on the server from your computer for 20 minutes or so, you will be logged out automatically. If you've just spent 25 minutes creating a wonderful report, then all your effort will be wasted, as the upload/update will fail!

Much better to write your report first on your word-processor, copy it, then paste it into the 'details' section of the form. Then click the 'Cleanup Word' and the 'Clear Font Tags' icons to remove unnecessary coding from your page so it displays properly. Then click 'add report' or 'update report' - you are then safe in the knowledge that the report has been created and you can return to it and insert pictures, alter text etc. PLEASE NOTE THAT IF YOU COPY A WORD DOCUMENT CONTAINING PICTURES, THE PICTURES WILL NOT BE UPLOADED, only the text - you will need to upload the pictures independently (see below)

The Editor toolbar resembles your word-processor; please note that NOT ALL PAGES HAVE THE SAME ICONS (picture upload, for example, is not possible on the 'programme' pages, as a different mechanism is used to upload a single picture.

The font styles box is shown below - this uses the same styles as elsewhere in the RIBI site, so a consistent look is achieved. Most of the other buttons are idential or very similar to your word processor, but I will explain more about some of the key ones.

Create Hyperlink

Hyperlinks are links to other pages on the Internet.

As you type, a hyperlink is automatically created when you hit the space bar after a URL or email address. However, you might want to make a word or phrase a hyperlink.

Highlight the word or phrase you wish to convert into a link Click the 'Create Hyperlink' button in the URL box, enter the web address of the page you want to link to - in this example I would enter http://www.rotary-ribi.org Click OK

The text has been converted into a link. If you are trying to create links to other pages in your own site, it is easiest to visit that page first, copy the URL (page address) then paste it into place in the box above.

Inserting Pictures

This is possibly the most confusing part of the Editor, but when you've done it once, you will wonder why it was so difficult the first time!

You have two choices;

1. Insert a picture that is already displayed somewhere on the Internet (for example, an image in the RIBI image gallery)
2. Upload a picture that is currently on your computer

The process:

Position the cursor where you want the picture to appear

Click on the 'Insert Picture' button;

	This is the box you will use if the picture you want to display is already somewhere on the Internet. So, if you wanted to insert a 'thumbnail' image from the RIBI gallery, you would need to enter the URL of the picture in the 'Image URL' box at the top of the window. However, this is something that might be a bit advanced to begin with, you probably want to upload a picture that is currently on your computer. Remember, pictures must be in jpg/jpeg or gif format to be displayed on the Internet, so if you've scanned something in as a bmp - it will not display! Click the 'Upload' button Another box appears;
	Click the 'Browse...' button
	A window will open showing a folder on your computer - possibly 'My Pictures' or wherever you last uploaded a picture; Depending upon how you computer is set up - and which operating system you are using, the appearance of the folder may be different. In the example left, it is set on 'Thumbnails', so small pictures are displayed. Either double-click on the picture or select it and click 'Open'. The previous window then appears - but this time with the path to the picture written in the box. Click 'Upload'
	Note that the picture is displayed in the Preview window, and the Image URL has been completed - this is where the picture has been uploaded. You should experiment with the options at the bottom of the windows; Alignment Probably wants to be set to 'Left' or 'Right' - if you leave it as 'Default', the picture will be on a line on its own, with lots of white space round it! Border Thickness If you want a border round your image, select 1 or 2, if not leave it as 0. Spacing This is quite important, as it separates the image from the text - I'd suggest '5' for both vertical and horizontal Size You can ignore this - images are automatically resized to a max of 300 x 300

I hope you find these tutorials helpful - if you find any errors or misleading instructions, please let me know via the form on the front page of the RIBI website.

Chris Sweeney

Hon. RIBI Web Editor

Please note RIBI is not responsible for the information you post on the website. You should have permission from the copyright holder before uploading/linking pictures that you haven't generated.