How to Insert and Place an Image, Add a Link

Inserting an image is simply a matter of selecting it from the image folder. In order to do that, you must first upload the image to the folder. See "How To Upload An Image" if you need help with that.

  1. In the editing area, place the cursor where you wish to insert the image and click on the image button (yellow mountain range).


     

  2. You'll now see a yellow dialogue box with "Image Info," "Link," and "Advanced" tabs. There are also boxes where you can type in the image width (make it less than 500 pixels if the image is wider than that; it will adjust the height automatically), plus a menu for selecting the image orientation or "alignment." Click on the "Browse" button to view the images list.


     

  3. Click on the image you wish to insert.


     

  4. In the following dialogue (see step # 2), use the Align menu to select where the image should be located (i.e. left, right, middle). Also, be sure to set the image width to less than 500 pixels. You can see a preview of your choices in the window to the right. For the best image quality, it's a good idea to edit the image to the correct size beforehand so that you don't have to make Drupal do it.
     
  5. If you wish to wrap a paragraph around an image, put the curser at the beginning of the paragraph before clicking on the image button. When you've selected the image, align it to the left or to the right. You might notice that the text comes too close to the image. To create some blank space around it, click on the "Advanced" tab in the image dialogue and type the following into the "Style" field as necessary (without quotes): "margin-right: 8px;" "margin-left: 8px;" "margin-top: 8px;" or "margin-bottom: 8px;". The semicolons are required at the end of each string.

    If your image is on the left, you'll only need to place a margin to the right; if it's on the right, you should only need a margin on the left. You can add a top or bottom margin as appropriate, but there's usually enough space there.
     

  6. To make an image link to something else, click on the "Link" tab in the image dialogue and copy-paste or type the address (URL) into the URL field. If the link is offsite, be sure to select "New Window (_blank)" from the "Target" menu.


     

  7. Click on "OK" to finish inserting the image.
     
  8. You should now see the image in the editing area. Click on the "Preview" button at the bottom of the  page to see how it will look.
     
  9. Make changes as necessary.
     
  10. Click on the "Save" button to save the page with the inserted image.