admin2/template
1
0
Fork 0
mirror of https://github.com/TeachBooks/template.git synced 2026-11-13 06:35:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

final

Browse source
This commit is contained in:
Julie Kirsch 2025-03-03 22:49:35 +01:00
parent 9b69d8bfc8
commit 1cb5bde1b0
1 changed files with 24 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

89
book/exercises/008.md
View file

@ -1,54 +1,8 @@
# Exercise 8: Add visual media # Exercise 8: Add visual media
To help you illustrate your content, it can be sueful to add some type of visual media such as figures, videos or gifs. If you want to add a figure/gif/video to you book, you can refer to another website. This is quite handy for video's but it does carry the risk that this figure/gif/video will no longer be visible if the location is changed. So it is better to add the source directly to the book. To help you illustrate your content, it can be sueful to add some type of visual media such as figures or gifs. If you want to add a figure/gif to you book, you can refer to another website. This is quite handy but it does carry the risk that this figure/gif will no longer be visible if the location is changed. So it is better to add the source directly to the book.
`````{tab-set} `````{tab-set}
````{tab-item} Linking
In Jupyter Book, you can embed a YouTube video using the `{iframe}` directive, ensuring you use the embed URL format.
<!-- ```md
```{iframe} https://www.youtube.com/embed/x2eonqw5M6o
---
width: 80%
align: center
name: my_linked_video
---
<caption>
```
``` -->
For example, the above code cell, will result in the following video.
```{iframe} https://www.youtube.com/embed/x2eonqw5M6o
:width: 80%
:align: center
:name: my_new_video
```
To link and display an online figure, you can use the `{figure}` directive, which also allows captions and references.
<!-- ```md
```{figure} https://town-n-country-living.com/wp-content/uploads/2023/06/craftsman-exterior.jpg
---
width: 80%
align: center
name: my_linked_figure
---
<caption>
```
``` -->
```{figure} https://town-n-country-living.com/wp-content/uploads/2023/06/craftsman-exterior.jpg
---
width: 80%
align: center
name: my_linked_figure
---
<caption>
```
````
````{tab-item} Embedding ````{tab-item} Embedding
1. You will first need to upload your media to the repository. Navigate to the folder called figures (`book/figures`) and make sure you are in the right branch. On the right top, click on `Add file > Upload new file`. 1. You will first need to upload your media to the repository. Navigate to the folder called figures (`book/figures`) and make sure you are in the right branch. On the right top, click on `Add file > Upload new file`.
@ -61,25 +15,15 @@ name: my_linked_figure
5. Copy this syntax and adjust the file name, width, alignment and caption. 5. Copy this syntax and adjust the file name, width, alignment and caption.
<!-- ```md
```{figure} figures/<new_figure>.PNG
---
width: 80%
align: center
name: my_new_figure
---
<caption>
```
``` -->
```{figure} figures/<new_figure>.PNG ```{figure} figures/<new_figure>.PNG
--- ---
width: 80% width: 80%
align: center align: center
name: my_new_figure name: my_new_figure
--- ---
<caption> <caption>
``` ```
```{Warning} ```{Warning}
Make sure the file extension of your figure is correct because markdown differentiates capital letters! Make sure the file extension of your figure is correct because markdown differentiates capital letters!
@ -93,6 +37,21 @@ Make sure the file extension of your figure is correct because markdown differen
9. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. 9. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page.
````
````{tab-item} Linking
To link and display an online figure, you can use the `{figure}` directive, which also allows captions and references.
```{figure} https://town-n-country-living.com/wp-content/uploads/2023/06/craftsman-exterior.jpg
---
width: 80%
align: center
name: my_linked_figure
---
<caption>
```
```` ````
````` `````