skip to content

Adding images to a page

See also 'Adding and image or carousel to the top of a page'.

Once you have added content to a page, you can upload and add images within the content in a single process. This isn't as straightforward as it could be but does work effectively.

To add an image to a page:

  • Position your cursor where you want to image to be - if you want the image to appear  floated left or right, the insertion bar should be at the start of the paragragh that's to appear next to the image; if you want the image to be on a line by itself (styled as 'inline') the insertion point should be on a line by itself.
  • Select the 'insert/edit image' icon  in the text editing bar.
  • You will see the 'Insert/edit image' screen:

This gives you a content tree for the folder, a breadcrumb navigation to access the rest of the site and the opportunity to select or upload an image.

  • If you wish to use an image to the the folder /images/ you will need to navigate to 'home' and then 'images', then select an image.
  • If you wish to upload an image in the folder you are currently in, you should just select 'upload file'.

You will then need to browse to the image on your local machine and select the one you wish to use, add a title for it and a description if you wish (see above for what these are used for). Click OK and then Upload. The images list in the middle column will now contain the image you just uploaded, and it will be selected.

On the right you will see the image and the options for adding the image into your page. You can select

  • how you want to position the image (right, left or inline)
  • the size selection (you can insert your image at the original size or scaled so the largest dimension fits the size you choose)
  • an opportunity to add the image description and include it as a caption if you wish.

Finally click ’Insert’. Your page (still in editing mode) will now show the image you have added.

If you have chosen to add a caption, the caption will not appear on the edit screen, only on the saved page. If the image is not how you want it, you can select the image and go back to ‘Insert/edit image’, change the settings you chose, then click ‘Update’. If the image is not where you want it, you can select it and drag it, but it may be easiest to go to the HTML view in the text editing bar and move the image.

Uploaded images are automatically published. If you create a new folder for the images you will have to publish the folder – you will also want to modify the settings so that it doesn’t get featured in the left hand navigation.

Adding an image inline to resize responsively

If you add an image on a line by itself and wish it to take up the width of the page, first add it as above, at a size that will fit the widest screen (this will vary, depending on if you have a right column and left-hand navigation or either, or neither). Once you have added the image to the page, go to the html view, locate the image insertion html and add 'width="100%"', as shown below:

<img class="image-inline" src="" width="100%" />

(Falcon will have added <p></p> around the image tag because it is on a separate line.) Update the page and then save it, and the image will now resize responsively.

A quick way to make an inline image 100% width is to check the box to add a caption and just add a space in the 'Description' field (which is where the caption is drawn from).