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: When using non-text content in your web pages – for example, images, video, audio or other files – you must provide a text-based alternative in order to meet the University's obligations under the WCAG 2.1 guidelines.
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 using 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 add overlaid text.
In this article:
Add an image
-
Browse to the page where you want to add an image.
-
Go to Edit > Edit centre content:
-
Place your cursor where you want to add the image.
-
In the left-hand menu, select Presentation > Image:
-
The Image pop-up appears:
-
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.
-
-
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.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.
-
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.
-
-
See the instructions below for how to Add a text overlay to your image, starting at step 2.
-
When you're happy with the settings, select Add image.
-
You can reposition your image as necessary.
-
When you've finished editing your page, select Publish.
Add a text overlay to an image
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.
-
Select the image you want to add an overlay to, then select Settings in the toolbar that appears:
Tip: The following steps also apply when adding a new image to a page, as described above.
-
In the Image pop-up, expand the Add a text overlay section:
-
In the Text box, enter the text you want to appear on the image. Select the red button to quickly clear all entered text.
-
Select the Text alignment to determine where on the image the overlaid text will appear.
-
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.
-
Select Update image (or Add image, if you're adding a new image to the page).
-
When you've finished editing your page, select Publish.
Use an image as a link to other content
-
Add a new image to your page, or select an existing image component.
-
Select the Link option in the component toolbar:
-
The Image: links and anchors pop-up appears:
-
Specify the content you want o link to in one of the following ways:
-
Enter URL of the page or other content in the Link URL box. SiteBuilder can use Relative or absolute URLs, or the target's path (the part of the URL after
https://warwick.ac.uk). -
Select the icon next to the Link URL box to choose a page or file on your site.
-
Drag and drop one or more files into the dotted-line box.
-
Select the Browse button in the dotted-line box to locate and upload a file from your computer.
-
Select an option under Recently uploaded files, if any are present.
-
Make a link to an existing anchor on this page by selecting an option from the drop-down list.
-
-
Use the radio buttons to select whether the link should open in the Same window (the default) or a New window.
-
Select Add link.