From b3040ce234e53110bac7000313ce010775bde4e6 Mon Sep 17 00:00:00 2001
From: Freek Pols <c.f.j.pols@tudelft.nl>
Date: Thu, 30 May 2024 09:32:46 +0200
Subject: [PATCH] including multiple options for figure placement

---
 book/basic-features/figures.md | 58 +++++++++++++++++++++++++++++++---
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md
index 8578324..3dd3094 100644
--- a/book/basic-features/figures.md
+++ b/book/basic-features/figures.md
@@ -2,6 +2,7 @@
 
 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>
@@ -9,8 +10,59 @@ To add a figure, just copy the figure to the correct directory. Then, in your ma
     ---
     <Figure caption>
     ```
+````
+Using the name label, you can refer to the figure as done with {numref}`Figure {number} <demoexample1>`.
 
-Or you can use the figure form below where you can specify all information and the code is produced for you:
+You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html). Some examples with different settings:
+
+````
+    ```{figure}  ../images/TUDelft_logo_rgb.png 
+    ---
+    width: 50%
+    name: demoexample1
+    align: right
+    ---
+    example 1: width (50%) as percentage, align right
+    ```
+````
+
+provides the output:
+
+```{figure} ../images/TUDelft_logo_rgb.png
+---
+width: 50%
+name: demoexample1
+align: right
+---
+example 1: width (50%) as percentage, align right
+```
+
+including a figclass sets the figure to the column at the right.
+
+````
+    ```{figure} ../images/TUDelft_logo_rgb.png
+    ---
+    figclass: margin
+    width: 50%
+    name: demoexample2
+   
+    ---
+    example 2:including figclass: margin
+    ```
+````
+
+<br>
+
+```{figure} ../images/TUDelft_logo_rgb.png
+---
+figclass: margin
+width: 50%
+name: demoexample2
+---
+example 2:including figclass: margin
+```
+
+We made a useful tool to make your figures, just specify all information and the code is produced for you:
 
 <div id="figuur_formulier">
 
@@ -18,7 +70,3 @@ Or you can use the figure form below where you can specify all information and t
 <div id="listContainer">
   
 </div> 
-
-
-You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html).
-