Skip to main content Skip to navigation

Add images to a page

Before you upload images, ensure you save them with the appropriate dimensions, resolution and file size for the web. Large, print-quality images – for example, saved from a camera or phone – in web pages take longer to download and consume visitors' mobile data unnecessarily. See our guidance on how to resize images for the web.

Important: Images that rely on text within them to convey information, such as an image of a poster, are not accessible. This is because the text they contain is unavailable to some people, for example users who rely on screen reader software or significant magnification of content. You should avoid the use of such images, or ensure that you provide a text-based alternative. For example, adjacent to the image, you could provide a link to a separate page containing a text-based version of all the information contained in the image.

If you want a small amount of text to appear over the top of an image, you can use the Add an image with overlaid text option, as described below.

In this article:

Add an image to your page using the Components Editor

Note: Each Image component will, by default, appear on its own line. To arrange images horizontally in rows, place image components in a block layout, carousel, or horizontal scroller.

  1. Edit the page with the Components Editor.

  2. Place your cursor where you want to add the image.

  3. In the left-hand menu, select Add images/media > Image:

  4. The Image pop-up appears:

    The 'Image' pop-up

  5. Specify the image to use with one of the following:

    • Enter URL of the image you want to use in the Image URL box.

    • Select the icon next to the Image URL box to choose an image that's already uploaded to your site.

    • Drag and drop one or more images into the dotted-line box.

    • Select the Browse button in the dotted-line box to locate and upload an image from your computer.

    • Select an image under Recently uploaded files, if any are present.

  6. Enter a brief but meaningful description in the Alternative text description box. This is the image's alt (alternative) text, which is required to comply with accessibility legislation. For more information, see our guidance on text-based alternatives to visual media.

    Note: If the image is described in the text or is just for decoration, it does not require an Alternative text description. In this case, select the checkbox This image is purely decorative.

  7. Optionally, specify the following settings for your image:

    • Image opens in lightbox when clicked - Select this option if you would like users to be able to view the image on its own in a pop-up.

    • Image position fixed when page is scrolled - if this option is selected, the image will act as a static background, meaning that the portion of the image which is visible will change as the page scrolls. If you select this option, you must additionally specify the Height of fixed image area in pixels.

    • Relative size - Use the drop-down list to choose what proportion of the available width should be occupied by the image:

      • Auto (default) - The image is displayed full-size, except where this is too large for the page or component where it's located. In these cases, the image will be resized to fit.

      • 1/12 to 12/12 - The image will take up the specified width of the available space.

      • Full page width - The image will take up all the available horizontal space.

      • Full page width, flush top - The image will take up all the available horizontal space, and sit flush against any image or other component directly above it.

    • Float - Use the drop-down to choose how the image appears relative to the surrounding content:

      • Standard block (default) - The image is left-aligned, with no content next to it.

      • Float Left - The image is left-aligned, with the content that follows it to its right.

      • Centred - The image appears in the middle of the page or component, with no content to either side.

      • Float Right - The image is right-aligned, with the content that follows it to its left.

    • Margin - Use the drop-down list to choose how much space there should be between the image and any content immediately adjacent to it. The options are Full (default), Narrow or None.

    • Add a border - Select this checkbox to add a solid line border around your image.

    • Add custom classes - If your page uses custom CSS styling, enter the classes you want to apply to your image here.

  8. To add a text overlay to your image, see the instructions below, starting at step 2.

  9. When you're happy with the settings, select Add image.

  10. You can reposition your image as necessary.

  11. When you've finished editing your page, select Publish.

^ Back to top

Add a text overlay to an image in the Components Editor

A text overlay enables you to display text on top of your images in an accessible way. It helps avoid the use of images that have text saved within them, which are not accessible.

  1. Select the image you want to add an overlay to, then select Settings in the toolbar that appears:

    The image component toolbar, with the 'Settings' option highlighted

    Tip: The following steps also apply when adding a new image to a page, as described above.

  2. In the Image pop-up, expand the Add a text overlay section:

    The 'Text overlay' section of the image component pop-up

  3. In the Text box, enter the text you want to appear on the image. Select the red button to quickly clear all entered text.

  4. Select the Text alignment to determine where on the image the overlaid text will appear.

  5. Select the Text colour. Overlaid text appears within a shaded box. When you select Light, the text is light, and the shaded box is dark. When you select Dark, the text is dark and the background is light. The default appearance, if you do not select an option, is Light.

  6. Select Update image (or Add image, if you're adding a new image to the page).

  7. When you've finished editing your page, select Publish.

^ Back to top

Insert an image using the old visual editor

  1. Browse to the page where you want to add an image.

  2. Go to Edit > Edit centre content / Edit right content.

  3. In the visual editor, place your cursor where you want to insert the image.

  4. In the toolbar, select the Image button. Alternatively, right-click in the visual editor and select Image:

    Insert image icon

  5. In the Image window, select Find. A popup appears containing two tabs: This web site and Your computer

  6. To use an image already on your website:

    • On the This web site tab, use the tree structure to navigate to a previously uploaded image:

      Navigate to your image

      Select the file name of the image you want to insert, then Select.

    To upload a new image to your page:

    1. Select the Your computer tab:

      Upload image from computer

    2. Select Choose file and browse to the image on your computer.

  7. Enter a brief but meaningful description in the Description box. This is the image's alt (alternative) text, which is important for accessibility - see the guidance on text-based alternatives to visual media.

    Note: if the image is described in the text or is just for decoration, you can leave the Description box empty and select the This image is purely decorative checkbox.

  8. Select the Insert at the bottom of the Image window.

  9. You can update the image's size, margins and alignment in the Image window, For more information on these options, see alignment and spacing below.

    Image properties box

  10. When you have finished editing your page, select Publish.

^ Back to top

Image alignment and spacing in the old visual editor

  1. Select the image in the visual editor, then select the Image button.

    Edit the image spacing and alignment

  2. In the Image window, you can change the following aspects of your image:

    • Width and Height: Set the size of the image in pixels.

    • Left margin, Right margin, Top margin and Bottom margin: Specify the space, in pixels, between the image and any surrounding content.

    • Alignment: Determines how the image is position on the page.

  3. When you've finished editing your page, select Publish.

^ Back to top

Add an image with overlaid text in the old visual editor

This option enables you to add images to an old visual editor page with a text overlay in an accessible way. It helps avoid the use of images that have text within them, which are not accessible.

  1. Browse to the page where you want to add an image.

  2. Go to Edit > Edit centre content / Edit right content.

  3. In the visual editor, place your cursor where you want to insert the image.

  4. In the toolbar, select the Insert a... drop-down menu, then Image with text.

  5. In the Image with text overlay box, select the image you want to use, as described in the Add an image using the old visual editor section above.

    The Image with text modal, including boxes for the image URL, text to overlay, image description, text position & text colour

  6. In the Text to overlay on image box, enter the text you want to appear on your image.

  7. Select the Text position to set where on the image the text will appear.

  8. Select the Text colour. Overlaid text appears within a shaded box. When you select Light, the text is light and the shaded box is dark. When you select Dark, the text is dark and the shaded box is light.

  9. Select Insert. You see an [image-with-text] tag, similar to the following, in the visual editor:

    [image-with-text alt="Image description here" position="top-left" src="field.jpg"]Some overlaid text[/image-with-text]
  10. Select Preview to see how the image with text looks on the published page, then Publish when you're happy with the appearance.

  11. When you have finished editing your page, select Publish.

^ Back to top

Related articles

Support

Email webteam@warwick.ac.uk
How to report a problem