How to add images to pages

A couple of thing to do - and know - before you start:

1. If you are using XStandard Pro or FCKeditor as your WYSWYG editing tool, then it's as simple as clicking the image button and uploading an imaget to your page via the image form. I recommend that you use the image upload functions of the built-in WYSWYG editors as it is easier than copying and pasting image code from the separate image upload facility in QnE.
2. Please note: if you are using the WYSWYG editing tools - but you still want to uploades 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.
3. If want to use the QnE image uploader rather than the WYSWYG uploader - view the image upload movie for an example of use.

If you use XStandard as your main editor uploading images can be made easier by upgrading to the Pro version of XStandard. We are happy to install this for you - contact us for further information.

QnECMS 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.
• The markup created is accessible and standard compliant (choose between HTML 4.01 or XHTML 1).

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.

Comments