Jomatu Wiki: Documentation

Jomatu Tutorial: How to upload an image file

Introduction

Uploading files is performed via the File Manager component in the Edit Facility. There are four categories of files you can upload:

Using our example website, our starting point is in the Edit Facility (the documentation for getting to this point can be found on the 'How to edit your website text' page - steps 1-3).

In this particular tutorial we're going to upload a new image, which we'll place to the right of the fourth paragraph of text.

Step 1: click on the 'File Manager' button

Upload Image File - Step Two

Clicking the 'File Manager' button launches the 'File Manager' window. In this window you will see a thumbnail of all the files that you've uploaded to Jomatu. At first of course, this list is empty; to upload a file, click on the 'Upload New File' link.

Step 2: click on the 'Upload New File' link

Upload Image File - Step Three

Clicking the 'Upload New File' link launches the 'Upload New File' window. The first section here offers five options which are solely concerned with web images*. Most images are simply too large, both in terms of both physical size, and file size, to be suitable for the web; these options offer a means to reduce the image size to be more web-friendly. Note: If you're not uploading a web image, then ignore this section completely.

As we're going to upload a web image - which we want to appear small - we've selected the 'Small Image (200 pixels)' option. Now we're going to locate our image on our computer.

Step 3: click on the 'Browse' button to locate our image file

Upload Image File - Step Four

When you click the 'Browse' button, a pop-up window appears showing the storage devices, folders and files on your own computer. Use this window to locate your file†.

Step 4: locate your upload file and select it

Upload Image File - Step Five

When you locate your file, either double-click the file, or single click (to highlight it) and click the 'Open' button. Note: this button name may be different on your computer†. The pop-up window will disappear and you will see your file name (usually with the path to that file) appear in the 'File to upload' form field.

Step 6: click the 'Upload' button to upload the file to your website

Upload Image File - Step Six (a)

Depending on your file size and internet connection speed, file uploading may take several minutes to complete. During file uploading you'll see the following message:

Upload Image File - Step Six (b)

When file uploading has completed, you'll be automatically returned to the main File Manager window. Here you can see your uploaded image file, represented as a thumbnail, in the list.

Upload Image File - Step Six (c)

Note: In this window you can view a larger version of the image by clicking on the thumbnail.

If you want to delete an uploaded file, simply click the small white cross in the red circle (you will be asked to confirm the delete). Note: this will not remove any references to the file from within your web pages, so you'll need to remove those, preferably before deleting the file.

Finally, click the 'Close File Manager' button to return to the main Edit Window, where we'll insert our newly uploaded image into our web page.

Step 6: insert the new image into our web page

We want to place the new image to the right of the paragraph we're currently editing (which is the third paragraph of the main text). To do this we need to insert the image just before the paragraph and then align it to the right (this will cause our paragraph to wrap around the image on the left-hand side).

Place the cursor just before the start of the text, then click the 'Insert/Edit Image' button which is located just below the 'Font Family' pull-down menu (hover your mouse pointer over the icons to get the descriptive tool-tip) as follows.

Upload Image File - Step Seven

Clicking the 'Insert/Edit Image' button causes the 'Insert/Edit Image' pop-up window to appear.

Step 7: select our image and add a description and title

There are three tabs in this window: 'General', 'Appearance' and 'Advanced'. In the 'General' tab we select our uploaded image file from the 'Image List' pull-down menu. We also want to change the 'Image Description' and 'Title' to be a little more descriptive as follows.

Upload Image File - Step Eight

Now click the 'Appearance' tab to set where we place the image on the page.

Step 8: set the alignment and add some horizontal spacing

Under the 'Appearance' tab we select 'Right' form the 'Alignment' pull-down menu. To avoid text abutting up against our image, we'll also set 'Horizontal Space' to 10 (pixels).

Upload Image File - Step Nine

Click the 'Insert' button at the bottom of the pop-up window to insert the new image and close the pop-up window.

Step 9: Click the 'Publish' button to make our changes live on the website

Finally, we want to save or publish our changes. If you have other changes you wish to make, then click the 'Save' button and continue editing. If you changes are complete for this web page, then, to put those change live on the website, click the 'Publish' button.

Upload Image File - Step Eleven

With all our changes published, we click the 'Exit' button to return to Jomatu.

This completes the 'How to upload an image file' documentation.


* Web images in this context refer to JPegs or GIF format files.

† This particular pop-up window is a part of your computer's operating system; it is not created by Jomatu. Therefore the methods for locating your files will be dependent on your particular system. The example shown was generated on a computer running Microsoft Windows.