The Image and Image modal controls enable you to embed an image within the main content of a page – for example, between paragraphs in text.

Overview

Low fidelity wireframe of an image with a caption
An example of an image with a caption
Low fidelity wireframe of an image modal with a caption
An example of an image modal with a caption

There's a subtle difference between the two components. Using 'Image' simply embeds the picture into the page whereas the 'Image Modal' component sites it in a dynamic box which users can click on to make the image pop out. 

There's also a difference in how these components work when creating them, with the 'Image' component having space for alt text and a caption, whilst the 'Image Modal' component simply allows you to add a caption.

How to use these components...

  • You can add or edit an image by adding and positioning either of these components where you would like it within your content using the green ‘+’ button.
  • You can reposition an existing image by dragging the component or by clicking the three dots at the top right hand side and moving the field up or down.
  • To add an image, add the component and then click on the ‘+ add an image’ button.
  • You can choose from images already within Contensis or upload a new one.
  • Add alt text describing the image and an option caption before publishing in the Image component, or a caption in the Image Modal component if required.
Image component in Contensis
This is the Image component which presents a flat image on the page.
Screenshot of an Image modal component in CMS
Image modal component in CMS

Remember: Images should be in the university's house style and of an appropriate quality. If you are unsure or need to source imagery, please contact Marketing Services.

Component in action

The image will have alt text for screen readers and be visible on hover. To see the components in action, check out this page