Including Images In Markdown

The OBCAP markdown editor, which allows you to edit items and responses, supports special syntax for including images in OBCAP. The special syntax looks like this: 

[(location|Alternate Text|Width|Height)]

Location

The location parameter tells OBCAP which image to display. If the parameter is a number, then the image is a file uploaded to OBCAP by a user. The key for a particular uploaded file shows up in OBCAP next to the file. (See the image below.)

Thus we could include this image (if it were still present in OBCAP) with the following markup 

[(3|Forrest Scene|Auto|250px)]
.


If the location parameter is not a number, then it is the name of a file in the "Content Directory" where the system administrator stores images, like the images on this page, that are part of OBCAP. For example, try pasting the following tags into the box below.

[(ImageNumber.png|Image numbering|25%)]
[(ImageExample.png)]

Alternate Text

The second parameter of the image tag sets the alternate text for the image. This should be a description of the image. Browsers use the "alt text" when the image is unavailable or when a screen reader reads the page to a user with visual impairment. Some browsers show this text in a tool tip when the mouse hovers over the image.

Width

The third parameter sets the width of the image. This can be set as a specific number of pixels (300 px,) a percentage of the width of the surrounding item (50%,) or a given measurement (3 in or 2cm.) The inch and centimeter measurements, however, are often inaccurate on many computers. Alternatively, including the word "Auto" lets OBCAP choose the width of the image.

Height

The fourth parameter is the height of the image. The height can use an of the measurements described for the width except the percentage measurement do not work for heights.

Omitting parameters

As illustrated above, This tag can be used with one, two, three, or four parameters. Any missing parameters are replaced with default values.

Practice

You can use the editor below to experiment with markdown.

Insert a cross-reference or use markkdown for text formatting.