You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: pages/media/index.qmd
+52-33Lines changed: 52 additions & 33 deletions
Original file line number
Diff line number
Diff line change
@@ -2,20 +2,30 @@
2
2
title: Images, videos and documents
3
3
---
4
4
5
+
::: {.pale-blue}
6
+
7
+
**On this page we will:**
8
+
9
+
* Add images with different sizes, captions and alt text.
10
+
* Embed videos using shortcodes.
11
+
* Embed other websites using iframes.
12
+
* Display PDFs inside a page.
13
+
14
+
:::
15
+
5
16
You should complete the listed tasks in the `4_images_videos_documents.qmd` file on your Codespace. Once you have worked through these tasks, commit and push your change.
6
17
7
18
## Images
8
19
9
-
You can add images to a Quarto page using Markdown.
10
-
The basic pattern is:
20
+
You can add images to a Quarto page using Markdown. The basic pattern is:
11
21
12
22
```markdown
13
23
14
24
```
15
25
16
26
In this example, we have an image file called `south_cloisters.jpg` in the `images` folder. The path to the file is:
17
27
18
-
*`..` meaning "go up one folder".
28
+
*`/` means "start from the root of the website", not from the folder of this `.qmd` file.
19
29
*`images` is the folder name.
20
30
*`south_cloisters.jpg` is the file name.
21
31
@@ -24,64 +34,66 @@ If your image is in the same folder as your `.qmd` file, you could just write th
24
34
This shows the image at its default size and alignment:
25
35
26
36
```markdown
27
-
37
+
28
38
```
29
39
30
-
{fig-alt="Default size and alignment example"}
40
+
{fig-alt="Default size and alignment example"}
31
41
32
-
You can control the size of the image with `width`:
42
+
### Customising image display
33
43
34
-
TODO: EXPLAIN CURLY BRACES
44
+
After the image, you can add options inside **curly braces** { }. These options tell Quarto how to display the image.
45
+
46
+
You can control the size of the image with `width`:
{fig-alt="Photograph of South Cloisters on St Lukes Campus"}
89
+
{fig-alt="Photograph of South Cloisters on St Lukes Campus"}
78
90
```
79
91
80
-
{fig-alt="Photograph of South Cloisters on St Lukes Campus"}
92
+
{fig-alt="Photograph of South Cloisters on St Lukes Campus"}
81
93
82
94
::: {.pale-blue}
83
95
84
-
**Task**: Open `media.qmd`, see image is provided in images folder
96
+
**Task**:
85
97
86
98
*[ ] Add image at full width
87
99
*[ ] Add it again, 40% width, aligned to right
@@ -93,9 +105,11 @@ Render the page and compare how the three images look.
93
105
94
106
## Videos
95
107
96
-
You can embed videos (for example, from YouTube) using the `video` shortcode. It will show a video player inside your page. Here is an example:
108
+
You can embed videos (for example, from YouTube) using the `video` shortcode. It will show a video player inside your page.
97
109
98
-
TODO: EXPLAIN WHAT A SHORTCODE IS
110
+
A **shortcode** is a special, compact bit of text that Quarto understands and expands into more complex HTML for you. You do not have to write the HTML yourself; you just use the shortcode and pass it the video URL.
111
+
112
+
Here is an example:
99
113
100
114
```{.markdown shortcodes="false"}
101
115
{{< video https://youtu.be/BUN0sSa2e9c?si=-o7gu4FGOZS7L2rt >}}
@@ -105,7 +119,7 @@ TODO: EXPLAIN WHAT A SHORTCODE IS
105
119
106
120
::: {.pale-blue}
107
121
108
-
**Task**: On `media.qmd`:
122
+
**Task**:
109
123
110
124
*[ ] Add a YouTube video to the page - for example:
111
125
@@ -119,9 +133,12 @@ Render the page and check that the video player appears.
119
133
120
134
## Embed websites
121
135
122
-
Sometimes you might want to show another website (e.g., news article, uni web page, etc.) inside your page. You can do this using an HTML `<iframe>`.
136
+
Sometimes you might want to show another website (e.g., news article, university web page, etc.) inside your page. You can do this using an HTML `<iframe>`.
137
+
138
+
An **iframe** is like a little browser window inside your page: it loads another web page within a box.
123
139
124
-
TODO: beginner friendly explanation of HTML syntax and of iframes
140
+
Basic HTML syntax uses tags like `<tagname> ... </tagname>`.
141
+
Here, `<iframe ...></iframe>` is a tag that tells the browser to embed another page.
Sometimes you may want a header above the iframe.... distinguish embedded page from yours... give it more formal... e.g., open in new tab etc... here is an example wrapper adapted from https://github.com/andrewheiss/ath-quarto/blob/main/cv/index.qmd
160
+
Sometimes you may want a header above the iframe to make it clear that this is an embedded page and to offer a link to open it in a new tab. Here is an example wrapper (adapted from [here](https://github.com/andrewheiss/ath-quarto/blob/main/cv/index.qmd)):
144
161
145
162
````markdown
146
163
```{=html}
@@ -197,7 +214,7 @@ You can embed a PDF so that it appears inside the page. The simplest way (using
0 commit comments