From b3040ce234e53110bac7000313ce010775bde4e6 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 09:32:46 +0200 Subject: [PATCH 1/9] 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} .png/.jpg --- height/width: @@ -9,8 +10,59 @@ To add a figure, just copy the figure to the correct directory. Then, in your ma ---
``` +```` +Using the name label, you can refer to the figure as done with {numref}`Figure {number} `. -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 + ``` +```` + +
+ +```{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:
@@ -18,7 +70,3 @@ Or you can use the figure form below where you can specify all information and t
- - -You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html). - From fcb0805dbc24b90f835c9b09b0be0cdb2d32d7ff Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 11:41:46 +0200 Subject: [PATCH 2/9] include
for alignment --- book/basic-features/figures.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index 3dd3094..070356b 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -27,7 +27,7 @@ You can find more documentation on including figures [here](https://jupyterbook. ```` provides the output: - +
```{figure} ../images/TUDelft_logo_rgb.png --- width: 50% @@ -36,6 +36,7 @@ align: right --- example 1: width (50%) as percentage, align right ``` +
including a figclass sets the figure to the column at the right. @@ -62,6 +63,8 @@ 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:
From 72f460809ab22524ae42eea9df6df40ef8b4bcb6 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 11:51:43 +0200 Subject: [PATCH 3/9] align right to center --- book/basic-features/figures.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index 070356b..a030b2b 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -20,7 +20,7 @@ You can find more documentation on including figures [here](https://jupyterbook. --- width: 50% name: demoexample1 - align: right + align: center --- example 1: width (50%) as percentage, align right ``` @@ -32,7 +32,7 @@ provides the output: --- width: 50% name: demoexample1 -align: right +align: center --- example 1: width (50%) as percentage, align right ``` From c36f09a877807a59b690a0fca5c922e0a5ddacf5 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 13:32:47 +0200 Subject: [PATCH 4/9] fix align right --- book/basic-features/figures.md | 99 ++++++++++++++++++++++++++++------ 1 file changed, 82 insertions(+), 17 deletions(-) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index a030b2b..888e0e4 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -7,41 +7,107 @@ To add a figure, just copy the figure to the correct directory. Then, in your ma --- height/width: name: + align: left / center / right + figclass: left blank or "margin" ---
``` ```` -Using the name label, you can refer to the figure as done with {numref}`Figure {number} `. -You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html). Some examples with different settings: +For example: ```` - ```{figure} ../images/TUDelft_logo_rgb.png + ```{figure} ../figures/TUDelft_logo_rgb.png --- - width: 50% + width: 70% name: demoexample1 align: center --- - example 1: width (50%) as percentage, align right + example 1: width (50%) as percentage, align center + ``` +```` + +provides this output, which looks nice. +```{figure} ../figures/TUDelft_logo_rgb.png +--- +width: 70% +name: demoexample1 +align: center +--- +example 1: width (50%) as percentage, align center +``` + +Using the name label, you can refer to the figure as done with {numref}`Figure {number} `. + +You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html).
+ +There are many settings, for instance aligning right: + +```` + ```{figure} ../figures/TUDelft_logo_rgb.png + --- + width: 50% + name: demoexample2 + align: right + --- + example 2: width (50%) as percentage, align right ``` ```` provides the output: -
-```{figure} ../images/TUDelft_logo_rgb.png + +```{figure} ../figures/TUDelft_logo_rgb.png --- width: 50% -name: demoexample1 -align: center +name: demoexample2 +align: right --- -example 1: width (50%) as percentage, align right +example 2: width (50%) as percentage, align right ``` -
-including a figclass sets the figure to the column at the right. +Aligning right can come with the potential downside (not always wanted) that text is wrapped around the figure. To avoid this one can use `
` elements, both before and after the text (make sure to leave an empty line after the
!): ```` - ```{figure} ../images/TUDelft_logo_rgb.png +
+ and the output +
+
+ + ```{figure} ../figures/TUDelft_logo_rgb.png + --- + width: 50% + name: demoexample3 + align: right + --- + example 3: width (50%) as percentage, align right with div style + ``` + +
+```` + +
+with the result: +
+ +
+ +```{figure} ../figures/TUDelft_logo_rgb.png +--- +width: 50% +name: demoexample3 +align: right +--- +example 3: width (50%) as percentage, align right +``` + +
+ +
+including `figclass: margin` sets the figure to the column at the right. +
+ +```` + ```{figure} demo97/demo97_figure1.jpg --- figclass: margin width: 50% @@ -54,7 +120,7 @@ including a figclass sets the figure to the column at the right.
-```{figure} ../images/TUDelft_logo_rgb.png +```{figure} demo97/demo97_figure1.jpg --- figclass: margin width: 50% @@ -63,9 +129,7 @@ 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: +One might quickely forget the code for making figures, here is a useful tool to make your figures, just specify all information and the code is produced for you:
@@ -73,3 +137,4 @@ We made a useful tool to make your figures, just specify all information and the
+ From 1a749a9f4ce6868913294f49383ca5a813b69977 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 13:36:35 +0200 Subject: [PATCH 5/9] proper reference to folder --- book/basic-features/figures.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index 888e0e4..60b4e6a 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -17,7 +17,7 @@ To add a figure, just copy the figure to the correct directory. Then, in your ma For example: ```` - ```{figure} ../figures/TUDelft_logo_rgb.png + ```{figure} ../images/TUDelft_logo_rgb.png --- width: 70% name: demoexample1 @@ -28,7 +28,7 @@ For example: ```` provides this output, which looks nice. -```{figure} ../figures/TUDelft_logo_rgb.png +```{figure} ../images/TUDelft_logo_rgb.png --- width: 70% name: demoexample1 @@ -44,7 +44,7 @@ You can find more documentation on including figures [here](https://jupyterbook. There are many settings, for instance aligning right: ```` - ```{figure} ../figures/TUDelft_logo_rgb.png + ```{figure} ../images/TUDelft_logo_rgb.png --- width: 50% name: demoexample2 @@ -56,7 +56,7 @@ There are many settings, for instance aligning right: provides the output: -```{figure} ../figures/TUDelft_logo_rgb.png +```{figure} ../images/TUDelft_logo_rgb.png --- width: 50% name: demoexample2 @@ -73,7 +73,7 @@ Aligning right can come with the potential downside (not always wanted) that tex
- ```{figure} ../figures/TUDelft_logo_rgb.png + ```{figure} ../images/TUDelft_logo_rgb.png --- width: 50% name: demoexample3 @@ -91,7 +91,7 @@ with the result:
-```{figure} ../figures/TUDelft_logo_rgb.png +```{figure} ../images/TUDelft_logo_rgb.png --- width: 50% name: demoexample3 From 642c7120a8523443e353efde32858395410f9711 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 13:37:35 +0200 Subject: [PATCH 6/9] update fig num --- book/basic-features/figures.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index 60b4e6a..4c6bdfb 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -124,9 +124,9 @@ including `figclass: margin` sets the figure to the column at the right. --- figclass: margin width: 50% -name: demoexample2 +name: demoexample4 --- -example 2:including figclass: margin +example 4:including figclass: margin ``` One might quickely forget the code for making figures, here is a useful tool to make your figures, just specify all information and the code is produced for you: From c20b211283f9705dcecba6a0cd74db7888343827 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 13:38:48 +0200 Subject: [PATCH 7/9] correction in fig --- book/basic-features/figures.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index 4c6bdfb..3efefc8 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -120,7 +120,7 @@ including `figclass: margin` sets the figure to the column at the right.
-```{figure} demo97/demo97_figure1.jpg +```{figure} ../images/TUDelft_logo_rgb.png --- figclass: margin width: 50% From 023085dfc7e752ca538cd97da049c488e910d186 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Thu, 30 May 2024 13:44:47 +0200 Subject: [PATCH 8/9] Update figures.md --- book/basic-features/figures.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index 3efefc8..db09848 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -23,7 +23,7 @@ For example: name: demoexample1 align: center --- - example 1: width (50%) as percentage, align center + example 1: width (70%) as percentage, align center ``` ```` @@ -34,7 +34,7 @@ width: 70% name: demoexample1 align: center --- -example 1: width (50%) as percentage, align center +example 1: width (70%) as percentage, align center ``` Using the name label, you can refer to the figure as done with {numref}`Figure {number} `. @@ -65,7 +65,7 @@ align: right example 2: width (50%) as percentage, align right ``` -Aligning right can come with the potential downside (not always wanted) that text is wrapped around the figure. To avoid this one can use `
` elements, both before and after the text (make sure to leave an empty line after the
!): +Aligning right can come with the potential downside (not always wanted) that text is wrapped around the figure. To avoid this one can use `
` elements, both before and after the text (make sure to leave an empty line after the `
`!): ````
@@ -79,7 +79,7 @@ Aligning right can come with the potential downside (not always wanted) that tex name: demoexample3 align: right --- - example 3: width (50%) as percentage, align right with div style + example 3: width (50%) as percentage, align right with additional div style ```
@@ -97,13 +97,15 @@ width: 50% name: demoexample3 align: right --- -example 3: width (50%) as percentage, align right +example 3: width (50%) as percentage, align right with additional div style ```
+ including `figclass: margin` sets the figure to the column at the right. +
```` From 5619d1b7a763dca29e41c5157feaf56ee629396c Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Thu, 30 May 2024 13:49:03 +0200 Subject: [PATCH 9/9] Added header for figuur formulier --- book/basic-features/figures.md | 1 + 1 file changed, 1 insertion(+) diff --git a/book/basic-features/figures.md b/book/basic-features/figures.md index db09848..f03c81e 100644 --- a/book/basic-features/figures.md +++ b/book/basic-features/figures.md @@ -131,6 +131,7 @@ name: demoexample4 example 4:including figclass: margin ``` +## Figure syntax maker One might quickely forget the code for making figures, here is a useful tool to make your figures, just specify all information and the code is produced for you: