Theme file mara as (/home/u621217036/public_html/theme/mara/theme.php) not found, or body section missing. Displaying content body only.

Image Upload

The quick image upload and link tool 

Image upload and linking is an area which has had an extensive overhaul in this version. There are now two image-related buttons, Image (Linking)  and Quick Image Upload. The Image button functions in a broadly similar way to the original, whereas Quick Image Upload is an entirely new  concept. Use whichever you prefer, although Quick Image Upload is more suited to the initial placement of an image on a page, whilst Image is typically used to modify an existing image link.

This page covers the new Quick Image tool. For the Image Dialog , see its separate page.

The Quick Image tool was developed in response to user feedback which suggests that whilst the standard Image tool works well for adjusting existing image links, the process of uploading new images is rather complex and unwieldy, involving too may separate steps in too many disparate windows. Thus, the idea here is to provide all that's needed to get from having a photo or graphic on your own local computer's disk, to having that image on your webpage, and to cover that entire process in a single, intuitive dialog box. The intention is that the dialog should handle most of the technical aspects like file naming, leaving you to decide on only those items which affect the page appearance.  

The Quick Image buttonTo use Quick Image, first of all click the insertion point in your document, where the image will be placed -don't worry if this is not exact, it can easily be changed later. Then press the Quick Image button on the editor toolbar -as shown at left. The resulting dialog, shown below, has three sections. The top shows images already on the webserver, the centre section is for uploading from your own computer, whilst the lower is for positioning your uploaded or selected image in the page.The Quick Image dialog

Existing Images

The top panel has two tabs; images already uploaded for this page, and images for all pages at this site level. 'Uploaded for this page' means images uploaded via Quick Upload.  Images used in the page which arrived via other methods of uploading will not be listed here. 'All Images' shows the contents of the 'img/' subdirectory below the location of this webpage. Unlike the standard Image dialog, there is no option to change this location, or to browse to other locations. Thus, for straightforward sites the user need not worry about the technicalities of exactly where images are uploaded to; that is taken care of by the system.

To use an image from either tab in your page, click it once. The link will be transferred to the Link URL box in the third section. Note: To use images from elsewhere on the webserver, open the standard Image dialog.


To upload an image from your own computer, click the button in the middle section. This will take you to a file-selector dialog which is generated by your computer's operating system. Thus, its appearance may vary depending on computer type. In this tool, you may select and upload only one image at a time. The image must have a jpg, jpeg, png or gif extension, otherwise it will be refused by the server. Note that not all operating systems allow the choice to be limited to such files, thus it may possible to select file types which will be rejected on upload.

Under Smart Sizing, you have the option to set the maximum width and height for the uploaded copy of your image. This will not alter the original file. It will only downsize the uploaded copy if one or other dimension exceeds the maximum you have set. This feature is useful when uploading a digital camera image of pixel dimensions far too large for webpage display. It should not however be regarded as a substitute for proper image preparation work. 

For images inline with your text, 400x400 or less is a sensible choice, for page header banners or standalone images you might wish to use 640x480 or 800x600. Only use sizes larger than 800x600 if you want the image to cover the entire page.

Once ready, press Upload. The  progress will be displayed in the top section.


The name for the uploaded copy is automatically generated, and may in some cases differ from the name on your local computer. It is displayed for reference, but you cannot change it. Again it's done like this to avoid bothering the user with technicalities, such that for the most part the upload process 'just works.' Normally, each image uploaded receives a distinct name. Therefore you do not need to concern yourself over naming clashes. If you do need to replace an existing image, then tick the over-write option, which turns the auto-rename mechanism off.   

Positioning / Alignment

Once you have selected your image, you will probably want to adjust how it displays in the page. In the third section, the horiziontal position of the image is handled in one step, and covers left, center or rigthhand alignment, along with the choice of the image being in its own space, or allowing the surrounding text to 'flow' around it.

The vertical position is determined by the insertion point, and there are no controls in the dialog for this. Instead, you adjust this by dragging and dropping the image in the main editor. Note that when you are using text flow-around it is generally better to place the insertion point at the start of a paragraph, and this should always be on the left of page (for left-to-right languages) even if the image is floated to the right.

Since the default HTML image alignment is not typically useful for photos or the like, the 'document default' option in fact applies a 'plain' image class instead of the actual default. As supplied this positions the image to the left on its own, though that can be changed in the stylesheet. The intention here is that the webmaster set the 'plain' style as required, so that it will apply to all images where no other choice is made. That keeps things consistent and avoids the problems that the actual default/unspecified alignment creates.


The supplied stylesheet provides a small space between the image and surrounding text. To keep things simple this is not adjustable in the Quick dialog. In the unlikely event that adjustment is needed, use the standard dialog after completing the Quick process.

View in popup

This option adds code to the image link allowing the user to click once to see the image fullsize in a popup. (actually a layer, since that avoids the need to open a new window)  This is only of use where the image is subsequently shrunk with the mouse handles in the editing window. Otherwise, the popup will be of the same size as the parent image. This option should not be used if it is intended to subsequently add a hyperlink (to another webpage) to the image. 


The Quick Image dialog provides a simple means of placing an explanatory caption below an image. This caption is effectively attached to the image, and will follow it if you drag and drop the image. To use this, type your caption into the  box. Now select the caption position from the options below it. The caption is not displayed in page editing mode. To see your caption you must either preview your work, or else exit from editing mode. It's done like this to ensure that the captions are kept separate from the normal page text. You can, if necessary, alter the appearance of captions by editing your theme.css file.

Use as a Link

You may wish to use your image as a clickable link to another webpage. If so, you must make this setting on the second tab of the conventional Image dialog, after the Quick Upload has been completed. Since the majority of images are not used as links it was felt that adding this functionality to the Quick dialog would be needless complication.

Files and Locations

As mentioned, Quick Image decides the locations for files itself. This is an img/ subdirectory under whatever level of the site the parent webpage is in. Thus if you want to link images between pages in different site sections, you must use the standard tool instead. 

The uploaded file is given a name consisting of the webpage filename minus its extension, an underscore, and the original image filename. This is felt to make it easier for the inexperienced webmaster to identify which images were uploaded for use in which page of the site. That does not of course preclude an image uploaded for one page being displayed in another, or even in several. However, it is felt that it simplifies things considerably by making it possible to show only the files which are likely to be required for a particular page.

Making changes

Quick Image is primarily intended for the initial upload and linking of images. It can be used to make changes to existing image links, provided that the image in question is selected in the editor before launching. Note however that the properties of the existing link will not be transferred to the Quick Image dialog; you must set them over again. For other changes, use the standard Image dialog.


Almost all of the Quick options have detailed help which is shown as a callout box when the mouse is hovered over the item. If in doubt, consult these.