How to add images to pages
CMS image upload features
- You can upload .gif, .jpg and .png images via a web form - no need for an ftp program.
- You can resize .jpgs. Real resizing not just width and height attribute changes.
- You can upload thumbnails and larger images and have them linked automatically.
- Please note: if you are using the WYSWYG editing tools and uploading images using the built-in QnECMS image feature - click the source button (marked as HTML in TinyMCE toolbar) before pasting your image markup into the page you are editing.
Tutorial for uploading an image
Use the following instructions to practice uploading images to your web page.
- Click the 'Add New Image' link from the administration menu at the bottom of any page.
- Click the browse button to find and open your image on your computer hard disk.
- Fill in a short description of your image - this will be used as the label shown to users who are using text only browsers or screen readers (i.e., this is the alt attribute).
- Fill in the title field. This can be a slightly longer description of your image. In standard compliant browsers this will be the text that appears when users hover their mouse pointer over the image on the web page.
- Alignment, padding and borders can be added using the checkboxes.
If you do not wish to resize the image you are uploading, now click the submit button. Your image will be uploaded to the web server and a page will appear with the html code for copying and pasting into your web page.
- Select and copy all of the html presented to you in the form.
- Browse to the page you wish to add the image to and click the 'Edit this page' link at the bottom of the page.
- If you are using the WYSWYG toolbar, click the source button (marked HTML in TinyMCE) and paste your image into the page at the appropriate point.
- If you are not using the WYSWYG paste the markup into the appropriate place in the page.
- Click the Submit button.
If you wish to resize the image you are uploading
After you have provided all of the above information on the form (description, title, alignment, padding, border), click the 'resize image' checkbox.
- Type a number (representing the size in pixels) into either the height or width boxes. Just fill in one box, not both, as the image will be resized while retaining the existing height to width ratios.
- Click the submit button and your image will be uploaded and resized.
Using the advanced options
The advanced options page is found by clicking 'More options' at the top of the page.
From this page you can upload both a thumbnail and a larger image, and have them linked automatically. You can choose to have CSS formatting (or turn it off) and choose between HTML 4.1 or XHTML 1 for the resulting markup.
The choices at the top of the page related to the thumbnail image. Those further down - under the heading, 'Add image to link to' related to the large image linked from the thumbnail.
The process for uploading an image is the same as for the default page.