Exercise 4. Images, videos and documents
On this page we will:
- Add images with different sizes, captions and alt text.
- Embed videos using shortcodes.
- Embed other websites using iframes.
- Display PDFs inside a page.
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.
1 Images
You can add images to a Quarto page using Markdown. The basic pattern is:
In this example, we have an image file called south_cloisters.jpg in the images folder. The path to the file is:
/means “start from the root of the website”, not from the folder of this.qmdfile.imagesis the folder name.south_cloisters.jpgis the file name.
If your image is in the same folder as your .qmd file, you could just write the file name.
This shows the image at its default size and alignment:
1.1 Customising image display
After the image, you can add options inside curly braces { }. These options tell Quarto how to display the image.
You can control the size of the image with width:
{width=50%}
We can control alignment using fig-align:
{fig-align="center"}
Adding .lightbox lets people click to see a larger version of the image - helpful when you have detailed figures or diagrams.
{.lightbox}
To add a caption, put text inside the square brackets:
You can also make your figure a hyperlink:
[](https://medicine.exeter.ac.uk/research/facilities/southcloisters/)
To add alternative text to your image:
{fig-alt="Photograph of South Cloisters on St Lukes Campus"}
Task:
Render the page and compare how the three images look.
2 Videos
You can embed videos (for example, from YouTube) using the video shortcode. It will show a video player inside your page.
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.
Here is an example:
{{< video https://youtu.be/BUN0sSa2e9c?si=-o7gu4FGOZS7L2rt >}}Task:
{{< video https://www.youtube.com/watch?v=dQw4w9WgXcQ >}}Render the page and check that the video player appears.
3 Embed websites
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>.
An iframe is like a little browser window inside your page: it loads another web page within a box.
Basic HTML syntax uses tags like <tagname> ... </tagname>. Here, <iframe ...></iframe> is a tag that tells the browser to embed another page.
<iframe width="100%" height="500" src="https://quarto.org/" title="Quarto Documentation"></iframe>Task:
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):
```{=html}
<div class="iframe-wrapper">
<div class="iframe-header">
<span>Website preview:</span>
<a href="https://quarto.org/"
target="_blank" rel="noopener">
View website in new tab
</a>
</div>
<iframe
width="100%"
height="500"
src="https://quarto.org/"
title="Quarto Documentation">
</iframe>
</div>
<br>
.embed-container {
position: relative;
padding-bottom: 129%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```4 PDFs
You can embed a PDF so that it appears inside the page. The simplest way (using raw HTML) is:
<embed src="example.pdf" width="100%" height="1000px" />