Inserting an image into the WYSIWYG editor

Use the WYSIWYG editor to insert images (PNG, JPEG, GIF) into your content. You can add images directly to content or reference them from another location (such as a folder channel). 

An image in the WYSIWYG editor.

Sections in this article:

Uploading an image vs. referencing a URL

Uploading an image or dragging and dropping an image into the editor stores that image as part of that content in your digital workplace. In contrast, referencing an image URL results in the image appearing in the article, but it is still being stored elsewhere (the URL location). This distinction is important for the following reasons:

  • Image file sizes must be below 10MB when uploading an image into your content. This restriction does not apply when referencing an image by a URL.
  • Uploading an image into content creates a unique URL for the image in your digital workplace. Deleting the content that contains this image also deletes the image. References to this image URL elsewhere in your digital workplace will now appear broken as the source image is gone.
  • If referencing a URL, make sure that your users have access to view the image. For images on external repositories, this means that the image should be public, or shared with the necessary users using the image provider's sharing options. For images in a folder channel of your digital workplace, the access rules on the image determine who can view it.

Image sizing

Large images automatically resize to 300px in width when first inserted into the editor. The image will insert immediately. 

Images in content

Enlarge images published in blog articles, calendar events, forum topics, microblog posts, tasks, and wiki articles by selecting them. You can then navigate through all the images in that piece of content using the provided arrows and gallery (these only appear when multiple images are present in the content).

Inserting an image by dragging and dropping

While you are creating content in the WYSIWYG editor, drag an image from your computer into the editor.

Inserting an image using Upload Image

While you are creating content in the WYSIWYG editor:

  1. Select a location in the editor where you want to insert the image. If you select a location in the middle of a paragraph, the image will insert on a new line after the cursor's location.
  2. Select Insert Image followed by Upload Image.
  3. Select Drop image to select an image file from your computer. If you have the image location already open, you can drag it into this box instead. The image will insert immediately.

Inserting an image By URL

While you are creating content in the WYSIWYG Editor:

  1. Open a separate browser tab and go to the image.
  2. Right-click the image and select Copy image address.
    • If the image lives in a folder channel of your digital workplace, copy the link associated with the Download button. The copied URL will contain a reference that specifies the current file version of the image. If you want the image to always show the latest version you must remove the version value from the URL. This part of the URL takes the form of ;v#where # is the number of the current version.
      https://{your digital workplace}/download/files/otisjpg;v1?data=larger
  3. Back in the WYSIWYG Editor, select a location in the editor where you want to insert the image. If you select a location in the middle of a paragraph, the image will insert on a new line after the cursor's location.
  4. Select Insert Image followed by and By URL.
  5. Paste the URL you copied in step 2 into the text box.
  6. Select Insert to add an image from this location.

Editing images in the WYSIWYG editor

Image editing tools

Selecting an image while editing content in the WYSIWYG editor displays a toolbar with the following editing tools:

Action Usage


Replace the current image with a new one. Similar to inserting an image, you can upload a new image or reference by URL.


Position the image horizontally. Setting the Display option to Inline causes paragraph alignment settings to impact the position of the image.

Image Caption

Add a caption below the image. You can style this text.

Selecting a second time will remove the caption.


Remove the image from your content.

Insert Link

Make the image a selectable link that navigates to a URL.


Set how the image interacts with the other objects in the editor. Selecting Inline allows the placing of text or other images next to this image while selecting Break Text will make the image take up the entire line.


Give the image Rounded corners, a Bordered effect, or a Shadow.
Alternative Text Enter alternate text for the image; the default will be the file name. To improve accessibility, enter a concise description of the image. This alternative text is used by screen readers to describe the image.

Change Size

Set the width and height of the image. 

Crop and Rotate

Crop, rotate, and adjust the zoom level of an image. This option is only available for images you have dragged and dropped into the editor or uploaded into the editor. See, Editing an image below to learn more about how to use these tools.
Image tools

Moving an image within content

While editing content, move an image to a new spot by dragging and dropping it. The image will insert at the spot indicated by the cursor inside the editor.

Resizing an image

In addition to resizing with the Change Size tool, you can drag the handles of a selected image to increase or decrease its size.

Resizing an image using its anchor points.

Editing an image

Select Crop and Rotate to open the Edit Image window. This option is only available for images you have dragged and dropped into the editor or uploaded into the editor.

The cropping tool.

From this window, you can perform the following actions:

  • Crop the image by dragging the vertical or horizontal square handles of the cropping box or dragging the image relative to the cropping box. 
  • Rotate the image 90 degrees counter-clockwise by selecting Rotate. This action is repeatable.
  • Zoom in on the image using the slider bar.

When you are ready to apply your changes, select Save. The resulting image that appears in the WYSIWYG editor will be what was highlighted within the cropping box. If you instead want to discard your changes, select Cancel.

Until you save the contents of the WYSIWYG editor, you can revert any image edits you've made since the last time you saved the contents of the WYSIWYG editor. To revert your changes, select Crop and Rotate and then select Revert. The WYSIWYG editor contents are saved whenever you publish the content, save a draft of the content, or update an HTML widget.

Adding a line break above or below an image

Hover over the top or bottom of an image to reveal a break button. Select this button to add a line break. This option is only available when there is not already a line above or below the image.

Inserting a line break above an image.Inserting a line break below an image.