Skip to main content

Adding Images

To add an image to a page:

  • Prepare a suitably-sized image. Most photos need their resolution reducing for publishing on the web. See the Resizing Images page for instructions.
  • Click in the text at the point where you want the image to appear.
  • Click the "Insert Image" button in the editor above the main text pane.
  • Either:
    - drag your image from Windows Explorer (or the equivalent for your computer) into the grey area top right where it says "Drop images or click here to upload", or:
    - click on the grey area top right where it says "Drop images or click here to upload", and select an image.
  • Click on the image you have just uploaded
  • The Markdown code to display the image will appear in your page.

You can also drag an image file directly into the main text area of the editor. However this not recommended because the image will be given a numeric name, and not the name of the file it came from. If you have done this, you can rename any image via the "Insert Image" button mentioned earlier: click on the image, edit the name and click SAVE. Images can be deleted via the same screen using the dustbin icon.

Please try to use sensible names for your images so that they are easier to manage.

The default markdown code put the image left aligned and makes it 'clickable'.

If you prefer not to have the image open with a click, then you can simplify the markdown to ![alt-text](IMAGE-URL-HERE) - where the 'alt-text' can be a description of the image (for people with visual impairments who use screenreaders)

If you want the image to be centred on the page, then you can use a bit of html instead
<p style="text-align:center"><img src="IMAGE-URL-HERE" alt="ALT-TEXT-HERE"></p>

You maybe able to find suitable images from XR's Global media library. You can download at appropriate resolutions directly from this site.