Template site for Rotary Clubs in GB & I
Home | tutorial home | Adding files and pictures
This page is in the process of being updated; old graphics have been removed to avoid confusion.
A video showing ho to do this is available in the club admin area under the 'Training Videos' menu.
Using the Editor
When you go to add a report or an event to your website, part of the form will probably have the 'html editor' toolbars as shown below. Depending on which pages you are using - and what level of access you have - different buttons may be displayed. Also your browser may 'hide' some buttons - at the end of each toolbar is a drop-down arrow to 'Show/Hide Buttons'. Click this, then click 'Add/Remove Buttons' to see the full list available for that page.
This looks very similar to your word-processor and can be as simple to use - but it also allows much more! I've added a couple of lines of text which will be altered as part of this demo.
Note that not all the icons on the toolbars will be the same as above; for example, members aren't able to upload files and images, so these buttons aren't shown. When you move your mouse over the buttons, a 'tooltip' says what that button does. I'm not going to explain every one, as many are obvious, but will concentrate on the ones that need more explanation - for example how to upload pictures and files.
It is also worth remembering that it is probably easier - and quicker - to write your report first in your own time and at your own pace on your word processor; then copy and paste it into place.
IMPORTANT - after pasting text, make sure you click the 'Clean HTML' button on the top row of the toolbar - this will remove unwanted and unnecessary code from your report. Failure to do this can prevent you being able to update or delete the report!!!
Headlines and sub-headings.
Much like the title of this paragraph, you can change the heading styles of text, using a consistent method throughout the website. this helps to provide a uniform look and avoids people using 648 different colours, just because they can!
Position the cursor somewhere in the paragraph of the text you want to change. Click the down-arrow by where it says 'normal', as shown left. select 'Heading 1' and your paragraph will change style:
IMPORTANT - a paragraph is all the text between one <Enter> and the next <Enter> It might be one short sentence or several sentences long. The heading style will be applied to the entire paragraph, not just selected text (which you can alter using the bold, italic and underline buttons, if available).
Adding Pictures (1):
(Assuming your picture is already uploaded)
1) Position the cursor where you want to place the picture.
2) Click the 'Image' icon on the 'insert' toolbar . Note that, despite it saying 'Image' a better description would be 'Media', as the same process is used to upload movies, sound clips etc unfortunately, I can't override this!
3) The 'Remote File Explorer' window will open. If there are already pictures (or video clips etc) in the destination folder, they will be displayed here:
4) Click on the image you want, then click on 'Insert' at the bottom of the Remote File Explorer window.
5) The picture has been added to the report:
Click on the image and you will see that the bottom of the form changes, showing the 'Image Properties' (Note that this area will change, enabling different features, when you do different things - e.g. add a link)
Also note at the moment that the image is positioned so that there is a big gap between the two lines of text. We can alter the 'flow' of the text by changing the alignment of the image.
Click the 'Advanced' button on the right of the properties area:
Note the properties area changes and there are boxes for H Space and V Space (these will put a space around your image so any text isn't flush against it).
6) Give each of these boxes a value of '5'
7) Click the down arrow by 'Align' and choose 'Left'
8) You should write a brief title for the picture in the 'Alt' box - this text will be displayed when a users mouse hovers over the picture in the final report.
I have added some extra lines of text, just so you can see the effect of the image alignment:
When your report is completed, don't forget to click the 'Add report' (or add event, update report etc) button so that the information is saved in the database.
Adding Pictures (2):
The editor has a simple way to upload pictures from your computer to the server. However, pictures must be 1024 X 768 or smaller before trying to upload them with the editor, or the upload will fail. Modern digital cameras with multi-megabyte pixels will often produce pictures larger than this, so you will need to resize them first.
1) Follow steps 1- 3 above.
2) Click on the 'Upload' button at the bottom of the window. NB - different browsers display different thigs - yours might say 'Browse..' or similar. Another window will open...
The precise display will vary according to how you have the folder displayed - the picture left shows 'thumbnails' of all the images in this particular folder on my computer. Note that I can change the location of where the pictures are displayed and also by hovering the mouse over the image, I can check that the image isn't too big (remember, they must be 1024 x 768 or smaller before trying to upload them)
3) Select the image
4) Click 'open' (or OK, depending on your browser).
5) After a short while, the image will be uploaded to the server.
6) If it is a small image, you can continue as in the earlier example, using alignment and spacing to wrap the text around the picture. howver, if it is a large image - e.g. 1024 x 768, you will find if you try to insert it that it takes up nearly all the space on your page! You need to create a thumnail picture - a smaller version that links to the bigger picture.
1) Right click on the picture - a menu appears
2) Select 'Insert Thumbnail'
3) Type the size that you want the thumbnail to be - I'd suggest not bigger than 300 pixls wide.
4) make sure the 'Keep Aspect ratio' box is ticked, or you will get a distrorted image!
5) Click 'insert
6) Your thumbnail picture is inserted into your report, with the link automatically created to the bigger image.
7) You may want to alter the alignment and margins of the thumbnail.
8) Note that when you next look in the Remote File Explorer window, two apparently identical images are displayed, e.g. Image.jpg and Image_1.jpg - the latter is the thumnail that was created.
9) When finished, don't forget to click the 'add report' button at the bottom of the form!
Adding files to your reports
Files - for example pdf forms, Word documents, excel spreadsheets - can be uploaded to the server. However, it should be noted that:
a) Not everyone has Word or Excel, so pdf is the common standard for downloadable files on the Internet.
b) if you upload a file for a report marked as 'members Only', then the report itself will be secure (only members who have logged in will be abe to read it), but the file itself is not secure - anyone sent the URL in an email, for example, could still open it. For this reason, if your report is mainly text based, don't bother with a pdf file!
c) FILES MUST BE LESS THAN 2Mb before trying to upload.
1) Click the 'document' button on the 'Insert' toolbar note that even though it looks like a Word icon, you can upload different file types, depending on the page you're using and your permissions.
2) The process is very similar to that for uploading a picture; find the file on your computer, click OK then Insert!The link is automatically created to the uploaded file.
3) In the screenshot left, you can see that the file called 'Anglesey.pdf' has been added to the report. Whilst this is OK - it could be better! Imagine if your file is called 'DistrictSecretarysReportFromCouncilNov2007.pdf' - then a long unsightly link is created!
To prevent this;
a) I have deleted the words 'Anglesey.pdf from the report (this has NOT deleted the file from the server) and typed 'Read a report about the club visit to Anglesey, which contains several photos and a competition' .
b) I then highlighted the word 'Anglesey', clicked the 'document' button, then the already uploaded file in the Remote File Explorer and clicked 'Insert'. This linked the highlighted word to the file. Difficult to explain - easier to do!
Now, when someone reads the report, they just need to click on the word 'Anglesey' to open the pdf file.
DON'T FORGET TO CLICK THE 'ADD REPORT' BUTTON OR ALL YOUR WORK WILL BE LOST!!!