CMS for editors > Creating content > Adding and editing an image

Adding and editing images

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

Adding images to content

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

Images can be also added to the rich-text editor or content areas in pages or blocks, either through drag-and-drop directly from Media, 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. 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.
  4. Type a Title for the image. The title is shown when the reader moves a mouse over the image.
  5. Select the desired image in the Media folder structure.
  6. Click Insert.

Editing images

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

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

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 You can apply preset values for cropping and resizing, if such values have been configured for the website.

An edited image file can either be saved as a copy or replace the original file:

  • Save as a copy. If the image was selected in a page or block, the copy will be saved in the local folder. If the edited image was selected in the media structure, the (renamed) copy will be saved in the same folder as the original.
  • Replace original image. Note that this action will affect all places on the website where the image is used.

Selecting the Edit option in the context menu for an image will allow you to edit the metadata, which for an image can be photographer, description and copyright information and such. Refer to Media for more information.

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.

Removing an image will make it disappear from the content, but it will remain in Media.

back to top




Episerver User Guide update 15-5 | Released: 2015-11-16 | Copyright © Episerver AB | Send feedback to us