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

Sections in this article:

• Uploading an image vs. referencing a URL
• Image sizing
• Images in content
• Inserting an image by dragging and dropping
• Inserting an image using Upload Image
• Inserting an image By URL
• Editing images in the WYSIWYG editor

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, which is still 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. The image should be public or shared with the necessary users using the image provider's sharing options for images on external repositories. For images in a folder channel of your digital workplace, the access rules on the image determine who can view it.

Image sizing

When first inserted into the editor, large images automatically resize to 300px in width. The image will be inserted 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 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 be inserted 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 the image location is already open, you can drag it into this box instead. The image will be inserted immediately. A security scan will automatically run to ensure the safety of your content.

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 specifying the image's current file version. 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. In the WYSIWYG Editor, select a location where you want to insert the image. If you choose a location in the middle of a paragraph, the image will be inserted 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:

Image tools

Action	Usage
Replace	Replace the current image with a new one. Similar to inserting an image, you can upload a new image or reference by URL.
Align	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	Remove the image from your content.
Insert Link	Make the image a selectable link that navigates to a URL.
Display	Set how the image interacts with the other objects in the editor. Selecting Inline allows text or other images to be placed next to this image while selecting Break Text allows the image to take up the entire line.
Style	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 section below to learn more about how to use these 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.

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.

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.