TO ADD AN IMAGE (OR IMAGES) TO A MOODLE HTML PAGE

First of all, you must establish an “images” folder in the “pub_html” of your home or network directory. You must name the folder with letters written entirely in lowercase (and please understand that the “parentheses” in this document are merely meant to highlight the names: do not use parentheses when naming files).

  • pub_html/images

The <images> folder is where you should store all of the images that you intend to add to Moodle pages. Images must be either JPG or GIF formats. You can also use PNG files (Portable Network Graphic), but some web browsers will not open PNG images, as the file format has not been universally recognized by all Internet software.

Image files should be between:

  • 320 x 240 pixels generally; and
  • 800 x 600 pixels maximum

You can use Photoshop to make compressed JPG files, specifically designed for the Internet. It is important that you add the ".jpg" extension to the file (if the suffix isn't there already). For example:

  • elephant.jpg

To add images to Moodle, e.g., to forum posts, you must place the image files in the <images> folder in your <pub_html> directory. You should use FireFTP to do this, to "ftp" files from a local drive, scratch disk, temporary work folder, etc., and upload them to the <pub_html> folder on your network space.

URL addresses

This is the URL address (Universal Resource Locator) for your <pub_html> folder:

  • http://www.ecuad.ca/~your_user_name

This is the URL address for the <images> folder in your <pub_html> folder:

  • http://www.ecuad.ca/~your_user_name/images

This is the URL address for the <elephant.jpg> image, which would be in the <images> folder in your <pub_html> folder:

  • http://www.ecuad.ca/~your_user_name/images/elephant.jpg

With this particular URL address, all web browsers will know to look into:

  1. Your <pub_html> folder;
  2. Your <images> folder; and
  3. Display the <elephant.jpg> file

To add image links to a Moodle post or entry

The addresses that I described above are proper URL addresses; that is, you could type the address into a web browser, and the browser would call up the images. Therefore, you could add such an address to a Moodle post as a "web link."

For example, if you were to make a forum post, referring to the Message Section of a new discussion topic, you should do the following:

  • In the Message Section, type the name the image you would like to link to and then highlight the text.
  • Go to the Formatting Tools in the Message Section and click on the Web Link icon (it looks like a single piece of chain, or a link). An Insert Link dialogue box should then open. You would then take the following steps:
    • URL: Add the URL to the image you would like to add. For example:
      • http://www.ecuad.ca/~your_user_name/images/elephant.jpg
    • Title: Give the image a title
    • Target: Choose "New Window" for the image to open in a separate window or "Same Window," etc.
    • Anchors: Don't worry about this.

Press OK.

If you want to add multiple images, you would follow the same steps as above for each image that you would like to add to your Moodle post.

Finally, to complete the process, click on "Post to Forum"