For the online learning world


Moodle Markdown editing – hidden treasure Part 8

Part 8 of our using Markdown in Moodle series, this time we look at using images.

Previous posts in this series

Images are included using Markdown in a very similar way to web links, but are preceded by an exclamation mark.

The alt text (meaning alternative text) is provided for users who cannot see the image (for whatever reason) so the text should make sense without any visual cues. Doing this will also provide a reminder or hint to those editing the text in Markdown as to the purpose of the image.

The optional title text is displayed in a pop up when the user hovers over the image and so can provide additional information:

![alt text](/path/img.jpg "Optional Title")

Just like web links, you can organise your document by keeping all the URLs together using footnote style references. Just give the image a short, unique name:

![alt text][photo]

and the anywhere else in your document, usually at the bottom, associate that name with an image file:

[photo]: /url/to/img.jpg "Optional Title"

Here is an example:

![Moodle logo](https://moodle.org/logo/moodle-logo.png "The Moodle logo")

The alt text, which is also important for accessibility reasons, will often be used by browsers when links to images are broken or temporarily unavailable:

![alt text for broken image](http://example.com/broken.link "This image will never display")

There you have it – adding images with Markdown, not too difficult eh?

Why not try adding some images to a Label or Page using Markdown?

More interesting Markdown tips next post…

Stuart Mealor
Latest posts by Stuart Mealor (see all)

Stuart Mealor

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development. His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Add a reply or comment...