Adding Images to a Page

When you upload a file using the content edit screen, a download link to the file will be inserted in the text of the node.  If you upload an image and you want to show it in the browser, you can add a link to the image in the body of your content:

  1. Position the cursor where you want the image to appear.
  2. On the rich-text toolbar, click on the Insert/Edit Image Button button.
  3. In the Insert/edit image dialog, enter the path of the image in the Image URL box.  If you have just uploaded the image, the URL will be displayed at the bottom of the page, just below the image name.  Only include the part of the image path after http://www.vuu.org/.  For example, if the full image path is http://www.vuu.org/files/foo.gif, you only have to input files/foo.gif. Whatever you type into the Image description box will be displayed when a user hovers the mouse over the image.  If you want the image to display as a size other than its actual size in pixels, enter the width and height also.  It's important to keep the aspect ratio (height divided by width) the same as for the original image, or it will appear distorted.  For example, if the original image is 300 pixels wide by 400 pixels high, and you want it to appear half size, you would input 150W x 200H.  This will not reduce the size of the actual file.  Optimizing the file size is a separate step:  see Uploading Files for a discussion of how to optimize image sizes for download efficiency.
  4. Insert/Edit Image Dialog Box

  5. If you've uploaded the images in this page, typically it won't be necessary to show clickable download links to the images themselves, so you can uncheck the "list" checkboxes next to the uploaded file names at the bottom of the page.