Add images to a page

Source: https://warwick.ac.uk/services/idg/services-support/web/sitebuilder2/manual/content/images/ Parent: https://warwick.ac.uk/services/idg/services-support/web/sitebuilder2/

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
• Add a text overlay to an image
• Use an image as a link to other content

Add an image

1. Browse to the page where you want to add an image.
2. Go to Edit > Edit centre content:
3. Place your cursor where you want to add the image.
4. In the left-hand menu, select Presentation > Image:
5. The Image pop-up appears:

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

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

8. Select the icon next to the Image URL box to choose an image that's already uploaded to your site.
9. Drag and drop one or more images into the dotted-line box.

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

    Note: If a file already exists with the name of your selected file, SiteBuilder will ask you to confirm that you want to overwrite it, and offer the option to Keep properties of existing file. - Select an image under Recently uploaded files, if any are present. 7. 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. 8. 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:

  • 12/12 (default) to 1/12 - The image will take up the selected amount of the available width.
  • 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.
  • Auto - The image is displayed at its 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.

  Note: This option is not recommended, as it can be unpredictable when displaying on different screen sizes. Selecting a specific size gives you more control over how the image appears on your page. - 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.

Back to top

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.

1. 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. 2. In the Image pop-up, expand the Add a text overlay section: 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

Use an image as a link to other content

1. Add a new image to your page, or select an existing image component.
2. Select the Link option in the component toolbar:
3. The Image: links and anchors pop-up appears:

4. Specify the content you want o link to in one of the following ways:

5. 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).

6. Select the icon next to the Link URL box to choose a page or file on your site.
7. Drag and drop one or more files into the dotted-line box.
8. Select the Browse button in the dotted-line box to locate and upload a file from your computer.
9. Select an option under Recently uploaded files, if any are present.
10. Make a link to an existing anchor on this page by selecting an option from the drop-down list.
11. Use the radio buttons to select whether the link should open in the Same window (the default) or a New window.
12. Select Add link.

Back to top

Related articles

• Upload a file
• Resize images for the web
• Best practice: Using images
• Add a hero block

Search the manual

Search

Support & feedback Learn to use SiteBuilder SiteBuilder noticeboard User community