diff --git a/book/exercises/008.md b/book/exercises/008.md index de90b16..7ce8c12 100644 --- a/book/exercises/008.md +++ b/book/exercises/008.md @@ -1,54 +1,8 @@ # 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-item} Linking - -In Jupyter Book, you can embed a YouTube video using the `{iframe}` directive, ensuring you use the embed URL format. - - - -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. - - - -```{figure} https://town-n-country-living.com/wp-content/uploads/2023/06/craftsman-exterior.jpg ---- -width: 80% -align: center -name: my_linked_figure ---- - -``` - -```` ````{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`. @@ -61,25 +15,15 @@ name: my_linked_figure 5. Copy this syntax and adjust the file name, width, alignment and caption. - -```{figure} figures/.PNG ---- -width: 80% -align: center -name: my_new_figure ---- - -``` + ```{figure} figures/.PNG + --- + width: 80% + align: center + name: my_new_figure + --- + + ``` ```{Warning} 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. +```` +````{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 + --- + + ``` + ```` `````