Skip to main content

How do I add images to a page?

There are two ways to insert an image in your page:

Before uploading images, ensure you save them with the appropriate dimensions, resolution and file size for display on the web. Large, print-quality images (e.g. saved from a camera or phone) placed in web pages take longer to download and consume your visitors' mobile data unnecessarily. See the guidance in: Resize images for the web

Insert an image from your website

  1. Browse to the page you want to add an image to.
  2. Go to Edit > Edit centre content (or Edit right content).
  3. In the content editor, place your cursor where you want to insert the image:

    Place cursor where you want to insert the image
  4. Select Insert a… > Image in the toolbar.
  5. In the Image picker window, select the tab This website. This shows the pages of your site in a tree format and the images already uploaded to each page:

    Image picker window

  6. Browse to the page containing the image you want to insert. The Up a level button Up a level button reveals the parent page, and its sub-pages and files. Select a page name to expand it, then view sub-pages and images. Pages that have sub-pages are denoted by the plus icon: Expand a section button To help identify images, hover over an image file to see a preview:

    Preview of logo in image picker window

  7. When you have found the image you want to insert, select the image's file name in the tree. Notice that the Image URL, Width and Height fields are populated automatically in the Image picker window.
  8. Enter a brief description in the Image description field. This is the image's ‘alt’ (alternative) text and is important for accessibility – see the guidance on text-based alternatives to visual media. For example, the alt text Athena SWAN Bronze Award is better than asba-logo1.png.

  9. Select the Insert button to add the image and return to the content editor:

    Image inserted in page and selected in the content editor

  10. To specify alignment and spacing options, right-click on the image in the content editor and select Insert/Edit image. For more information on these options see: Alignment, spacing and appearance.
  11. When you have finished adding images and editing your page, select Publish in the toolbar.

Upload an image from your computer

  1. Browse to the page you want to add an image to.
  2. Go to Edit > Edit centre content (or Edit right content).
  3. In the content editor, place your cursor where you want to insert the image.
  4. Select Insert a… > Image in the toolbar.
  5. In the Image picker window, select the tab Your computer.
  6. Select the Choose file button and browse to the image on your computer:

    Your computer tab selected in image picker window

  7. Enter a brief description in the Image description field. This is the image's ‘alt’ (alternative) text and is important for accessibility – see the guidance on text-based alternatives to visual media.
  8. Select the Insert button to add the image and return to the content editor:

    Image inserted in content editor

  9. To specify alignment and spacing options, right-click on the image in the content editor and select Insert/Edit image. For more information on these options see the following section.
  10. When you have finished adding images and editing your page, select Publish in the toolbar.

Alignment, spacing and appearance

  1. Right-click on the image in the content editor and select Insert/Edit image.
  2. On the General tab you can edit:

    • Image URL: the path to the location of the image file
    • Image description: the alternative text
    • Title: a title displayed as a tooltip when hovering over the image

    General tab selected in Insert and Edit image window

  3. On the Appearance tab you can edit:

    • Alignment: specify how to align the image in relation to nearby text
    • Dimensions: width and height in pixels
    • Vertical space: specify the number of pixels to insert above and below the image
    • Horizontal space: specify the number of pixels to insert at the left and right of the image
    • Border: specify the border width in pixels (e.g. a value of 1 applies a 1px black border to the image; use 0 to remove an unwanted border)
    • Class and style: note these are obsolete in the ID7 common website template.
  4. When you have finished adding images and editing your page, select Publish in the toolbar.

Related FAQs

Support

Telephone 73737
Email webteam at warwick dot ac dot uk
How to report a problem