Institute of Astronomy

Inserting Images

It is possible to insert images into pages (as well as research theme pages and research projects/subtopics). The graphical editor used to edit the page contents will handle the upload of the file to the IoA webserver automatically and insert the appropriate links into the page.

When editing a page, place the cursor in the editor field to the position the image will be inserted, then click the Insert Image button on the editor's toolbar.

You will be presented with the Image Properties dialog.

The CKFinder file browser window will then appear (if it does not, check that your browser does not have a pop-up blocker enabled which is preventing it).

If the image is already on the server

All images are stored under Images in the left-hand Folders pane, in a folder corresponding to the section of the site in which they are to appear.

To insert an image already on the server, simply navigate to the appropriate folder then double-click the image you wish to insert in the right pane. This will return you to the Image Properties dialog, with the address of the image now entered in the URL field.

If the image is not yet on the server

You may upload an image file from your computer to the web server using the file browser. To do so, first of all navigate to the appropriate folder into which the image will be stored under Images on the left hand pane.

You should upload the image into the folder corresponding to the section of the website in which the image is to appear (e.g. about, research, outreach). The research folder is further subdivided into themes (e.g. instrumentation) and these into specific projects (e.g. lucky_imaging).

If the appropriate folder does not yet exist, create it. Find the folder the new folder is to be created inside (e.g. instrumentation), right-click this (Crtl+click on older Macintoshes) and select New Subfolder. Enter the name for the new folder, then click OK.

Navigate to the folder into which your new image is to be uploaded, then click Upload on the toolbar at the top of the file browser window. The Upload New File pane will then appear.

Click Choose File, then browse to the image on your computer in the dialog that appears. Select OK (or equivalent, depending on your browser/platform) to confirm your selection in the file browser dialog, then back in the file browser window, click the Upload Selected File button to send the file to the IoA server.

Once uploaded, the file will then appear in the right pane of the browser window. To insert it into the page, simply double-click the file.

Once the image is selected, click OK in the Image Properties dialog to insert it into the page.

Images should be in JPG format (for photographs) or PNG format (for diagrams, logos etc.). Also supported is the GIF format. The maximum width of an image to fit on a page is 720 pixels. You should prepare a suitable image on your computer before uploading.

Resize the image file itself, do not simply specify the size in the HTML or in th Image Properties dialog (as HTML scaling of images tends to be of poor quality).

Importantly, never directy upload high resolution photographs or other images. This will waste disk space and will take a long time for users to download. Scale them down to a suitable size and compression first.

Centering the Image

To centre-align an image, set the Alignment field in the bottom-left of the Image Properties dialog.

Wrapping Text Around Images

It is possible for text on the page to flow around the image, while the image floats to either the left or right hand side of the page. To do this, in the Image Properties dialog, click the Advanced tab, then in the Stylesheet Classes field, enter either 'left-float' or 'right-float' (without the quotes) to have it float to the left or right, respectively.

Editing an Image

Once inserted, you can return to the Image Properties dialog for an image by double-clicking the image you wish to edit in the editor field.

Page last updated: 20 February 2011 at 17:47