Using Images

To include an image in your page:

1. Create the image and save as a .png file with a width of 600px.
2. Upload the image to the _images folder in the same directory of the page that will use the image, creating the _image folder if required.
3. Reference the image in the markdown.

Uploading the Image to an "_images" Folder

Using the GitHub web interface, navigate to the parent folder of your page and add the image to an _images folder.

In the GitHub editor you can not create an empty folder so if the folder does not exist it will be created during the upload step.

Referencing the Image in the Markdown

To reference the image we use markdown like:

![AnVIL Image](../_images/anvil-image.png "AnVIL Portal Image!")

Note the ../_images/ preceding the image name. This is required to tell the CMS where the image is.

You can also add a caption to the image using an HTML style custom tag like:

<figure>
<img src="../_images/anvil-image.png" alt="AnVIL Portal Image."/>
<figure-caption>Figure 1. The original AnVIL homepage image.</figure-caption>
</figure>

This renders like:

TIP

You can check if the image link is correct by using the preview link in the markdown editor.

Controlling Image Size

Images wider than the page channel will be sized to fit. Images narrower than the page channel will render their natural size.