100 ways to use a VLE – #88 Embedding Images

Gloucestershire College

Often many VLE courses look very “boring”, a list of resources and activities. This is partly down to the fact that a VLE is often seen by practitioners as a repository of content, with links to resources and activities. One way to break up the list is to use images to enhance the visual appeal of the course on the VLE.

Within Moodle this is done through the use of labels, though the process of embedding an image is not that simple. If you are on Moodle 1.9 many staff find it complex and difficult to follow. One issue that does arise is the necessity of resizing images, especially those taken with a digital camera. Though Moodle allows you to resize the images from a resolution perspective, this doesn’t reduce the file size of the images, so the page on Moodle containing the image will take a long time to download.

The process in Moodle 2.0 is much much easier and if your Moodle is configured to use external repositories such as Flickr and Wikimedia it is even easier to embed high quality and relevant images into a course on the VLE. However if uploading your own images, the size problem will still be there.

One solution to this is to use an online service such as Flickr which will then allow you to embed a resized image into the page on the VLE. You do need to understand a little about how images are embedded into a webpage, but the process once done can be easily replicated into other pages or activities on the VLE.

Firstly find the image on Flickr. Using Advanced Search will enable you to find images that are available for reuse (through Creative Commons).

So make sure you have checked the check box for Creative Commons.

Having found a suitable image, on the image page there are options available from downloading or sharing via other services.

From the Share button.

Grab the HTML/BBCode

<a href="http://www.flickr.com/photos/jamesclay/3607561914/" title="Gloucestershire College by James F Clay, on Flickr"><img src="https://farm4.static.flickr.com/3311/3607561914_63110b0549.jpg" width="500" height="375" alt="Gloucestershire College"></a>

I have used this embed code at the top of the blog post. Flickr allows you to use different sizes of images, so you can go for smaller images.

On the Moodle page or label the key is to click the relevant button to switch to HTML.

On Moodle 1.9 it is called Toggle HTML Source.

On Moodle 2.0 it is called Edit HTML Source.

Paste in the embed code into the window.

Images in themselves offer lots of learning opportunities and can be used in a variety of ways to extend and enhance the learning process. The VLE as a tool to support learning shouldn’t exclude the use of images, so practitioners need to learn how to embed images withint the VLE.

The end result is an image embedded into the course on the VLE. Images can add a visual appeal to a course, emphasise a topic, or enrich an activity.

Leave a Reply