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

Episerver CMS iconAdding 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 also can add images 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:

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.

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

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 makes it disappear from the content, but it remains in Media.

Changing image properties

You can control the display of images in the rich-text editor through a set of properties.

Some of these properties are not supported in HTML5. If your website is configured for HTML5, you do not see unsupported properties in the dialog box.

  1. Select the image you want to change in the editor area.
  2. Click the Insert/edit image button on the editor toolbar.
  3. On the General tab, you can change the Title and Image description. Click Update to save your changes.
  4. On the Appearance tab, you have the following options of positioning images in relation to text. Click Update to save your changes.
  5. Option Description
    Dimensions

    Change the display size of an image. Ensure that Constrain proportions is selected to keep the image proportions. Enter the width of the image in pixels, and the height is changed accordingly.

    Class

    Select a CSS class if any are available for positioning images on your website. Or, select an option in Alignment to manually position the image.

    Vertical space and Horizontal space

    Add a value in pixels for the space between the image and the surrounding text if it is not handled by the CSS class. For example, this might be useful if you have a large amount of text on a page and want to place an image in the top right corner with the text floating around it with some space padding between the image and the text. The preview window lets you see the result of the different options you choose.

    Border

    Add a value in pixels for the image border if it is not handled by the CSS class.

    Style In the Style field, you can add inline styling. However, it is recommended to use CSS classes.

  6. On the Advanced tab, you can change any of the following. Click Update to save your changes.
  7. Option Description
    Alternative image

    Add images for mouse over and/or mouse out. Browse to select the images in the media library. For best results, these images need to have the same size proportions in pixels.

    ID

    Set a unique identifier for the image that you can reference by style sheets or by a JavaScript providing additional functionality.

    Language direction

    Set the language direction (left to right or right to left) for the description, title and other text attributes specified for the image.

    Language code

    Set the desired language if you have an image showing content in a different language than the actual page. Enter the standard language code format, such as it (Italian), es (Spanish), en (English) and so on.

    Image map

    Associate an image map with the image. Image maps map certain areas of an image to links or other actions. There is currently no built-in way to create image maps in TinyMCE.

    Long description link

    Type a link to provide a longer image description than what fits in the description field. Most visual browsers do not support this feature; this is primarily an accessibility feature.

back to top Episerver image




Episerver User Guide 16-9 | Released: 2016-12-15 | © Episerver 2016 | Send feedback to us