Skip to main content
Ontario Tech home page
CMS User Guide

Inline or embedded images

Inline or embedded images appear in the content area of the page.

How to

Embed an inline image

  1. Upload your images to the Shared Assets website in the CMS, or if you're linking images directly from Brandfolder, skip this step and refer to the Brandfolder steps for embedding an image link.
  2. On your website, create a new page or edit an existing page where you want to place the image. 
  3. Place your cursor in the WYSIWYG editor where you want your image to appear and select the Insert/edit image icon (or right click and select Image).
    Embed Image Screenshot


  4. The image editor will appear.
    Image editor
    • Image source - where the image is stored.
      • Select External if you're using an image from Brandfolder.
      • Select Internal if you're using an image uploaded to the CMS (be sure you have obtained copyright or you own the image before uploading it to the CMS).
    • Image - the image file (internal) or image URL (external). Click the field and browse to and select the image in the Shared Assets website in the CMS if you're using an internal image. Otherwise paste the image URL from Brandfolder in the field.
    • Decorative - set whether this is a decorative image. It is rare that an image is used for decorative purposes (e.g. a decorative background graphic or pattern), so this should be left unchecked. All images should be supportive of the text content on the page.
    • Image description - a short description of the image (alternative text). For example, a photo of Polonsky Commons might have the description "Polonsky Commons in the summer". 
    • Dimensions - adjust the width and height of the image. Inline images should have an aspect ratio of 3:2 and be 300px wide. For example, 300px wide x 200px high. Constrain proportions should remain checked so that the image is not skewed if you adjust one of the dimensions.
    • Class - (optional) a style to add to the image. For example, if you would like the surrounding text to wrap around the image, select float-left or float-right from the dropdown list.
How to

Float an inline image (wrap text around the image)

  1. Select the embedded image in the WYSIWYG editor by clicking on it. 
    Select the image
  2. From the Formats dropdown, select Custom, then float-left if you want the image on the left and the text to wrap around it on the right, or select float-right if you want the image on the right and the text to wrap around it on the left. 
    Select float-left or float-right
Search the CMS User Guide