Images, videos and documents
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:
..meaning “go up one folder”.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:
You can control the size of the image with width:
TODO: EXPLAIN CURLY BRACES
{width=50%}
To add a caption, put text inside the square brackets:
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}
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: Open media.qmd, see image is provided in images folder
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. Here is an example:
TODO: EXPLAIN WHAT A SHORTCODE IS
{{< video https://youtu.be/BUN0sSa2e9c?si=-o7gu4FGOZS7L2rt >}}Task: On media.qmd:
{{< 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, uni web page, etc.) inside your page. You can do this using an HTML <iframe>.
TODO: beginner friendly explanation of HTML syntax and of iframes
<iframe width="100%" height="500" src="https://quarto.org/" title="Quarto Documentation"></iframe>Task: On media.qmd:
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
```{=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="media/example.pdf" width="100%" height="1000px" />