Please Note: You need elevated privileges to upload files (including graphics) to our system. This is a security measure to protect the site against malicious attack by unknown parties. If you would like these privileges, please contact the webmaster with a short request, including your intended uses of this site.
Here’s how to insert images into your web pages. First, either edit an existing page, or create a new web page (see “A Primer on Creating Web Pages” if you don’t know how to do this.) Next you must upload your image files using the attachments dialog box (see image upper-right).
Click “Choose File” to select a file to upload. [Note: this button may be labled “Browse” or something similar, depending on your browser.] Then click “Attach” to mark the file for uploading. (It won’t actually be uploaded until you submit the page for publication.) Repeat this two-step process if you wish to upload more than one file or image. The image below shows the dialog with some files attached.
Notice the “List” checkbox? That’s to display a list of downloadable files in an attachments box at the end of your page. It would look something like this:
You probably don’t want your image files to be listed like that on the page, so uncheck those checkboxes for your image files. You will want leave them checked only for files you explicitly wish to make available for download (e.g. a PDF file). Alternatively, or in addition, you may wish to use inline HTML <a href=""></a> tags for downloadable files (the file path is the same for image files).
If you mark for upload a file which you later decide you’d really rather omit, check the “Delete” checkbox. The file won’t be removed from the list, however the file will not be uploaded when you go to publish the page. (Note: If you are editing a page in which a file has already been uploaded, the file will be deleted from the server once you publish the page.)
To insert the image into your text, you use an HTML image tag, as shown here on the right. If you are not familiar with HTML, the image tag, in its simplest form, looks like this: <img src="path to file">, where “path to file” is replaced with a path to your uploaded file.
The image tag supports additional (optional) elements, some of which control how the image is displayed. For example if you embed the image tag inside a block of text, inserting align="right" will cause the image to appear on the right side of the page, with text wrapping around the image to the left. Embedding hspace="10" vspace="5" will add 10 pixels of whitespace horizontally around the image, and 5 pixels of whitespace vertically, which is visually more appealing than text which runs right up to the image. Although optional, it is always good to include the alt element. It adds text describing the graphic, which users with disabilities will appreciate. The format looks like this: alt="Text describing graphic".
The path to the file consists of “/system/files/” plus the filename. You may notice that, by default, the system replaces spaces in the filename with “+”. This notation is optional, however, because spaces in the filename may be used if the filename is quoted. HTML specifications actually require that the filename be quoted, but many browsers are forgiving if it isn’t, and some people fall into the bad habit of omitting them.
So for a file named “img tag example.png” the path could be: /system/files/img+tag+example.png. So in the simplest image tag format, you could use either: <img src="/system/files/img+tag+example.png"> or <img src="/system/files/img tag example.png">. Of course you can add more elements; a more sophisticated image tag example is: <img src="/system/files/img+tag+example.png" alt="An example of the image tag in use" align="right" width="521" height="345" hspace="10" vspace="5">.
Please note: Unless your images are small, around 20K or smaller, you should place a <!--break--> tag before your images. This will prevent the images from loading on summary or teaser pages. Not all users of our system will have fast InterNet connections.