Including images

You can include images of various types texts. Images can either be stored on the web or you can attach them to the assignment. Attaching the images is recommended. To include an image from the web you can write:

```image
    url: http://muziekgeschiedenis.hugoverweij.nl/images/mozartcols3.jpg
```

This is built up as follows: 

  • The first line consists of three backquotes, followed by the word image, to describe the type of block.
  • Next there is either the url that points to the image that must be shown in the block, or the label of an image that is attached to the assignment.
  • This can be followed by some options (see below).
  • And the block is ended by three backquotes.

Options

The following options exist:

  • fit. This determines how to deal with the image when it does not fit in the area. The following options are available:
    • none. The image is place with its original size.
    • fill. The image is stretched to fill the area. This is default.
    • cover. The image is scaled to cover the area. So it fills the area but the aspect ratio stays the same. Part might be invisible.
    • contain. The images is scaled to the maximum size that is still contained in the area. The whole image is visible and the aspect ratio is maintained,  but it might not fill the entire area.

Normal image

Quarterfall supports png and jpg images. You can either point to an image on the web or attach the image to the assignment and indicate its label. Here is an example:

```image
    label: myimage
    fit: cover
    border: true
```

Svg images

These are scalable vector graphics images. Many drawing programs can produce them. They can be scaled without loss of quality. The files normally have an extension .svg. You can either point to an svg image on the web or attach an svg file to the assignment and use its label. Note that the fit option does not work in this case.

Google drawings

You can also use images created by Google Drawings. For more information, see the help on including charts and diagrams.

Still need help? Contact Us Contact Us