Adding and editing images

A web page does not embed images, instead it links to the media library where images are stored. To display images in content, the images must be available in a folder in the Media structure. You can edit images inside Episerver using the Image Editor, providing basic image editing features such as cropping, resizing and transforming.

Adding images to content

Images often are added to content through an image link property, where you simply select an image from a folder under the Media tab, and the image is automatically placed and displayed in the content.

You can also add images to the rich-text editor or content areas in pages or blocks. To add an image this way, you can drag and drop the image directly from your computer into the rich-text editor and it is automatically stored in the For This Page (or For This Block) folder with its original file name. Another way is to first upload the image to a folder under Media in the assets pane and then add the image through drag-and-drop from the folder, or by using the toolbar in the rich-text editor:

1. Place the cursor in the editor area where you the image.
2. Click the Insert/edit image button on the editor toolbar.
3. Select the desired image in the Source folder structure.
4. Enter an Image description for the image. The image description is important when a reader has turned off the display of images in the browser or when a visually impaired user is using a screen reader.
5. Click Ok.

Finding the image location

If you have an already inserted image in the rich-text editor and you want to find out where it is stored, select the image and a Go to media button is displayed. Click this button to open the image or hover over it to see where the image is stored.

Editing images

Do one of the following to access the Image Editor options:

• In the rich-text editor, select the image and then click Image Editor in the toolbar.
  
  
• Locate the image in Media, and select Open in Image Editor from the context menu.

  

Image editing features include cropping, resizing and transforming:

Image editing	Description
Crop	Enter values for Top, Left, Width and Height, or draw a selection in the image to crop. Note: Remember to click Apply to save the changes before proceeding.
Resize	Enter values for Width and Height, or move a corner handle to resize, keep Constrain proportions selected to retain the image proportions. Note: Remember to click Apply to save the changes before proceeding.
Transform	Flip or rotate the image, or select Grayscale to convert to grayscale.
Preset values	Apply preset values for cropping and resizing, if such values are configured for the website.

You can save an edited image file as a copy, or replace the original file:

• Save as a copy. If the image was selected in a page or block, the copy is saved in the local folder. If the edited image was selected in the media structure, the (renamed) copy is saved in the same folder as the original.
• Replace original image. This action affects places on the website where the image is used.

Removing images from content

For an image in:

• an image property, click the remove option.
• a content area, select Remove in the context menu.
• the rich-text editor, click the image and delete it.