Insert image

This page will assist a new user in mastering the insert image tool. This tool creates HTML code for the user. The Image Icon on the HTML editor's toolbar brings up this popup window. We should mention here that JPG, GIF and PNG files are recognized Moodle images file types.

Version 1.5.3

Using the insert image tool

After opening the tool, you will click on an image file, that puts the address of the file in the Image URL address box at the top of the tool. Next you put an alternative text which will appear when the student moves their mouse over the image.

At this point you have done the minimum and can save your work. You will then return to the page in WYSIWYG HTML edit mode.

Before saving, or by clicking on the image and the using the insert image icon, you can do other things to the image. This includes layout, spacing and resizing the displayed image,

Often the image you want to use is not located in your course files. We genenerally recommend you upload an image file to your course.

The sections below will cover each of these operations.

Uploading an image file

These folders and files can also be found in the administration block under files.

1. The basic steps are to locate the file
   1. Using the File Browser Window for previously uploaded files, OR
   2. Upload a file
      1. Locate and click on the location the file will go to in the File Browser Window
      2. Use Browse button to locate file (local machine)
      3. Use Update button to place file in File Browser Window,
2. click on file in File Browser Window to place file in "Insert URL"
3. Enter Alternative Text
4. Optional Use Layout, spacing and size parameters

• Best practice is to put all of a single activities images in a folder such as "Lesson Example"
  • It is possible to zip a local folder with images and upload it to a course lesson. See files Click here for more information on files.
  • Remember to use the Refresh feature on your browser if the image does not appear to change in the Moodle Lesson.

When you browse for a local course image file its URL will be inserted like:

 http://www.yourMoodle.net/moodle/file.php/5/courseFolder2/pic1.jpg

Layout

Alignment and border thickness

Spacing

Horizontal and Vertical

Resizing

Width and height of the displayed image

Tips & cautions

Images in page content generally works just fine IF nothing is changed in the actual url address of the file. The famous red x where the image should be indicates something has changed. The first thing to do is to refresh your browser, then click on the image and use the insert picture tool again. Go through the steps again of finding the picture in the file structure in the file browser window.

• Remember if you change your domain name, your moodle folder name, the image link won't work. In some cases, a backup and restore the course as a new copy or on another server, the link might be broken.

• If you shorten the URL to:

1. /moodle/file.php/5/courseFolder2/pic1.jpg it will work even if your domain is changed, but not if restored as new course.
2. courseFolder2/pic1.jpg it will work even if your course file is backuped and restored as a new course, even on another server.

• Site file folder linking: (on Moodle 1.8.2 at least)

The URL to files to the frontpage or site folder always contain /1/ like http://www.yourMoodle.net/moodle/file.php/1/siteFolder2/test.jpg Remember anyone with the URL can access files there. Files in a specific course generally are restricted to access only from that course.

A link like: /moodle/file.php/1/siteFolder2/test.jpg will work, and should even work if the site is mirrored on another server (AND the moodle folder name is not changed).

Moral, linking within Moodle is like linking on the internet. Sometimes things change and the teacher is the last to know.