Part 8 of our using Markdown in Moodle series, this time we look at using images.
Previous posts in this series
- Introduction to Markdown – https://wp.me/p8KJp1-No
- Editor preferences – https://wp.me/p8KJp1-Nx
- Text formatting with Markdown – https://wp.me/p8KJp1-NJ
- Creating headings with Markdown – https://wp.me/p8KJp1-NQ
- Markdown to create lists – https://wp.me/p8KJp1-O4
- Quoted paragraphs – https://wp.me/p8KJp1-O8
- Adding links with Markdown – https://wp.me/p8KJp1-Oc
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:
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…