mirror of
https://github.com/TeachBooks/template.git
synced 2026-11-13 06:35:52 +00:00
57 lines
2.3 KiB
Markdown
57 lines
2.3 KiB
Markdown
# 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 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} 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`.
|
|
|
|
2. Choose the visual media you want to upload. Remember its file name as you will need it later.
|
|
|
|
3. Commit your changes.
|
|
|
|
4. Now let's add the figure to a chapter. Navigate to the file you want to work in (for example `book/some_content/overview.md`) and make sure you're in the correct branch.
|
|
|
|
5. Copy this syntax and adjust the file name, width, alignment and caption.
|
|
|
|
|
|
```{figure} figures/<new_figure>.PNG
|
|
---
|
|
width: 80%
|
|
align: center
|
|
name: my_new_figure
|
|
---
|
|
<caption>
|
|
```
|
|
|
|
```{Warning}
|
|
Make sure the file extension of your figure is correct because markdown differentiates capital letters!
|
|
```
|
|
|
|
6. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button.
|
|
|
|
7. Add a commit message.
|
|
|
|
8. To see you changes, go to {octicon}`play;1em` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting (user type 4))
|
|
|
|
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>
|
|
```
|
|
|
|
````
|
|
`````
|
|
|