How to Change an Image or Add a New Photo

Sometimes a learning object is 'not quite right' because the images do not reflect your industry, or your learner group, or other reasons. These are not difficult to change and the process is explained in this section.

Camera.jpgCustomising Images and Photos

These changes are achieved by using Kompozer (see Tools in the Getting Started section) but any HTML editor will do. The process generally is:
  1. Locate the name of the page where the photo sits in the learning object
  2. Locate the name of the photo in your learning object, and it's size. (in pixels)
  3. Change it with your own photo, ensuring that your photo has the same name and is the same size.

STEP 1: Finding the page
Follow the instructions in the 'Exploring your Learning Object' section in Getting Started to locate the page where your photo sits - write this down. While you are viewing your learning object, go on to Step 2....

STEP 2: Finding the name and size of the photo
You need to know both the name and the size of the photo and depending on which browser you use, this process may alter slightly. Here are the instructions for a couple of commonly used browsers:
  • Internet Explorer: RIGHT-click in the middle of the photo that needs to be changed - select Properties, then note the name and size of the photo.
  • Mozilla Firefox: RIGHT-click in the middle of the photo that needs to be changed - select View Image Info...then note the name and size of the photo
Locating photo info.jpg
  1. You are looking for a file which will appear similar to one of the diagrams above. It won't be exactly the same because each learning object is different. In this case though, the name of the photo is area_pg4_p1.jpg ....and it is 746 pixels wide by 420 pixels high.
  2. Write this down as you'll need this information to hand for the next step.

STEP 3: Deleting the photo
Open Kompozer, and set up a new site as per the instructions in Changing Text, then locate the web page which contains the photo you wish to change. Double click on the html file - this will open it up in the main window of Kompozer, and the photo will be displayed. At this point, you can delete the photo.

STEP 4: Adding your own photo
Rename your own photo with exactly the same name as the one in the learning object. It is also best to re-size it to at least close to the same size - use standard photo-editing software for this eg Microsoft Photo Editor. If you don't have anything, you can re-size with

With your mouse in the position where the deleted photo was located (or where you want it located), click on 'Image' in the toolbar at the top....a window will appear. 'Choose File' to locate your photo....then click OK. Note that there are tabs in the Image Properties box where you are able to change dimensions and alignment etc.
Change Image.jpg

Check that your new image is in the correct position, and click Save.

STEP 5: Checking and Re-packaging
When you have completed customising the images as required, close Kompozer. Go back to your folder and click on the 'start-here.htm' file again to ensure that your new photo is showing and correctly located. Finally, re-package your learning object according to the instructions in the Repackaging section.

Demonstration Video

This video demonstrates the above processes:

Back to Top