Subscribe via RSS

Editing Images

  1. Login to your website manager.
  2. View the tutorial on Adding Images if you don't already have an image to edit.
  3. Once you have your image in place in the text editor (Resource content) box, click it once to select it.
  4. Now click the Insert/edit image icon .image icon
  5. Make sure you have a word or two in the "Image Description" field. This will show up if a user has images turned off and will also be used for persons who use screen readers (if they have poor eyesight), so make sure it describes the picture well.
  6. Click the Appearance tab.
  7. In the "Alignment" drop-down menu, you have several options for aligning your image with the paragraph text near it. Each selection has a visible example to the right. You will probably use the last two options, Left and Right, the most. This will wrap paragraph text around the image on two sides.

    alignment example
  8. In the dimensions option, if the "Constrain Proportions" box is checked you can change one dimension (height or width) and the other one will automatically change so that the proportion remains the same. This prevents stretching or squishing your image. Just update the width (the first box) or the height (the second box) with a new number and press TAB on your keyboard and the other dimension will update accordingly, It's not recommended to make the dimensions bigger as this will cause your image to become fuzzy.
  9. Vertical space and horizontal space provides a cushion above/below and left/right of your image respectively. If you are aligning an image to the left or right, I recommend a horizontal space of 5 (pixels). After filling in either or both boxes with a number, press TAB on your keyboard and you will notice the tree example to the right will adjust accordingly, so you can get a general idea of how your image will look on the page.
  10. Border will provide a solid black border around your image. Again, place a number in the blank, such as 5, and you will see the tree example update to give you an idea of how your image will look on the page.
  11. Don't worry about the Style field. It's is for advanced users who know CSS.
  12. Click the ADVANCED tab at the top of the image editor window.
  13. Under SWAP IMAGE, you can check the box and have the image change to another image when the mouse cursor is hovered over the image. Just select the image using the Browse icon add image. FOR MOUSE OVER is the image you want to show when the mouse cursor is hovered over the image, and FOR MOUSE OUT is the image that appears when the mouse cursor is moved off the image (usually the original image).
  14. The MISCELLANEOUS section is for advanced users and is not necessary to cover in this tutorial.