University of Strathclyde website

Images

main content

Taken from http://www.dnnsoftware.com/help#Dnn.Platform/Documentation/Introduction_Online.html%3FTocPath%3D_____1

Inserting Images

How to insert an image using the Rich Text Editor.

  1. Click the Insert Media button and select Image Manager from the drop down list - OR - Use the keyboard shortcut CTRL + G. This opens the Image Manager.
  2. Navigate to and select the required image. See "Using the Resource Manager"
  3. Optional. In the Image Editor, use the Best Fit, Actual Size, Zoom In and Zoom Out buttons to modify the previewed image - these changes cannot be saved.
  4. Optional. Click the Image Editor button to edit the way the image is displayed. See "Working with the Image Editor"
  5. Optional. Click the Properties tab and set image properties. See "Setting Image Properties"
  6. Click the Insert button.


The Image Manager

 

Setting Image Properties

How to set the optional properties of an image using the Image Manager of the Rich Text Editor.

  1. If the image has already been inserted, right-click on the image and select Properties... from the drop down list - OR - Click on the Properties tab of the Image Manager if currently adding the image.
  2. Click the Lock Ratio / Unlock Ratio button to unlock or lock the width/height ratio at any time. Unlocking the ratio enables the width and/or height to be modified independently.
  3. In the Width text box, enter the width in pixels which the image will be displayed as.
  4. In the Height text box, enter the height in pixels which the image will be displayed as.
  5. At Image Alignment, click the Alignment Selector button and select the alignment for this image.
  6. At Border Color, click the Color Picker button and select the border color. Note: A Border Width must be entered to display the border.
  7. In the Border Width text box, enter the pixel width for the border - OR - Use the Increase and Decrease arrows.
  8. In the Alt Text text box, enter the alternative text for this image.
  9. In the Long Description text box, enter the long description for this image.
  10. At Margin, enter a pixel value or use the Increase and Decrease arrows to add spacing between the image and the text. Spacing can be added to the Top, Bottom, Right and Left of the image.
  11. At CSS Class, select a class for this image.
  12. Click the OK button.


Setting the properties of an existing image


Setting the properties of an image during insertion