Figures

Figures#

To add a figure, just copy the figure to the correct directory. Then, in your markdown file, include the figure as follows:

    ```{figure} <figurename>.png/.jpg
    ---
    height/width: <height or width in pixels>
    name: <name of the figure>
    align: left / center / right
    figclass: left blank or "margin"
    ---
    <Figure caption>
    ```

For example:

    ```{figure} ../images/TUDelft_logo_rgb.png
    ---
    width: 70%
    name: demoexample1
    align: center
    ---
    example 1: width (70%) as percentage, align center
    ```

provides this output, which looks nice.

Using the name label, you can refer to the figure as done with Figure 88.

You can find more documentation on including figures here.

There are many settings, for instance aligning right:

    ```{figure} ../images/TUDelft_logo_rgb.png
    ---
    width: 50%
    name: demoexample2
    align: right
    ---
    example 2: width (50%) as percentage, align right
    ```

with the result:

Aligning right can come with the potential downside (not always wanted) that text is wrapped around the figure. To avoid this one can use <div> elements, both before and after the text (make sure to leave an empty line after the <div>!):

    <div style="clear: both;">
    and the output
    </div>
    <div style="clear: both;">

    ```{figure} ../images/TUDelft_logo_rgb.png
    ---
    width: 50%
    name: demoexample3
    align: right
    ---
    example 3: width (50%) as percentage, align right with additional div style
    ```

    </div>

with the result:

including figclass: margin sets the figure to the column at the right.

    ```{figure} demo97/demo97_figure1.jpg
    ---
    figclass: margin
    width: 50%
    name: demoexample2
   
    ---
    example 2:including figclass: margin
    ```