Skip to main content

Inline or embedded images

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

The recommended aspect ratio for inline images is 3:2 with minimum dimensions of 300px W x 200px H. 

When uploading images to the CMS, it is best to upload the image at 1000 px W x 667 px H, and resize the image to 300px x 200px when embedding it on a page. In other words, the original image will remain at 1000px x 667px, but will be displayed as 300px x 200px. This is useful when the same image will be used in multiple contexts.

How to

Embed an inline image

  1. Upload your image to the Shared Assets website in the CMS, or if you're linking an image 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 are typically 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