Adding images to your page
Adding an image is super easy! Here are a few methods
View the source Markdown for this page
Add an image from the web:
Start an in-line link with an exclamation point then place the alt text in the brackets followed by the image link in the parentheses:
![WAML Logo](http://www.waml.org/groundwork-master/images/wamllogo200_15.jpg)
You can also add images “reference style.” This is handy if you don’t want to clutter up your Markdown. You can just place the references at the bottom of the page. It goes like this:
![Point Sublime][Sublime]
[Sublime]: http://www.waml.org/groundwork-master/images/grndcnyn.jpg
Nice job!
Add an image from your directory:
You can also add images from a file directory. If you’re using GitHub Pages, that means you would want a folder where your content or images live in your GitHub repository. The syntax is the same, except replace the link with the path to the image:
![Steezy WAML Logo](/gis-workshop-waml-template/content/img/WAML_sticker_stylized_serif.png)
Sweet!
Add a different format:
Want to put a gif in there? No problem!
![Surfer Boy](https://media.giphy.com/media/dJUtqIcqeyMvK/giphy.gif)
“gif” is pronounced with a hard “g”
Link an image:
To link an image, you just need to embed the image syntax within the syntax for a hyperlink:
Here’s a regular link:
[WAML Conference 2020](http://www.waml.org/conf)
Here’s a linked image:
[![WAML Logo](http://www.waml.org/groundwork-master/images/wamllogo200_15.jpg)](http://www.waml.org/conf)
Click Me!
So easy, right?!
Need to get extra fancy?
You can also add html directly to Markdown. Say you wanted to change the size of an image, for example.
<img src='../img/WAML_sticker_stylized_serif.png' width='250' alt='WAML sticker'>
Aren’t you so fancy!!