session-images.qmd

---
title: "Including images into Quarto"
subtitle: "Session - Images"
editor_options: 
  chunk_output_type: inline
---

```{r}
#| label: packages
#| eval: true
#| include: false
library(countdown)
library(knitr)
```

## Adding images using markdown

The NHS-R Community logo taken from the GitHub repository directly

``` markdown
![](https://raw.githubusercontent.com/nhs-r-community/assets/main/logo/nhsr-logo.png)
```

. . .

![](https://raw.githubusercontent.com/nhs-r-community/assets/main/logo/nhsr-logo.png)

## Adding images using html

``` markdown
<a href='https://nhsrcommunity.com/'><img src='https://raw.githubusercontent.com/nhs-r-community/assets/main/logo/nhsr-logo.png' align="right" height="80" /></a>
```

. . .

<a alt="NHS-R Community's logo" href='https://nhsrcommunity.com/'><img src="https://raw.githubusercontent.com/nhs-r-community/assets/main/logo/nhsr-logo.png"/></a>

## Adding images using `{knitr}` and code chunks

This is for images that are available on the computer and in this case is to a folder called `img` which is part of the slide code:

```{r}
#| echo: true
knitr::include_graphics("img/purrr_cat.png")
```

. . .

```{r}
#| eval: true
knitr::include_graphics("img/purrr_cat.png")
```

## Your turn - add an image in Visual view in RStudio

The `Visual` editor is great for WSIWYG (what you see is what you get) and the code that's generated can be seen in `Source`:

::: incremental
-   Open file `images-report.qmd` in folder `images_report/`
-   In the Visual view go to the bottom of the report and type `/` then `image`
-   Select `bakers_1.png`
-   Look at the code in `Source`
:::

```{r}
#| eval: true
countdown::countdown(minutes = 8,
                     color_border = "#005EB8",
                     color_text = "#005EB8",
                     color_running_text = "white",
                     color_running_background = "#005EB8",
                     color_finished_text = "#005EB8",
                     color_finished_background = "white",
                     margin = "0.9em",
                     font_size = "2em")
```

## Navigating folders

In markdown (`Source` view) linking to an image in the same area as the `.qmd` file is straightforward, as is going to a subfolder

``` markdown
![](bakers_1.png)
![](img/bakers_2.png)
```

. . .

A subfolder from the main root needs `../`

``` markdown
![](../images/bakers_3.png)
```

. . .

::: {.callout-note collapse="false" appearance="default" icon="true"}
## Useful things to know

-   When typing the names of the folder, pause and use Tab to give you options to choose and save typing
-   Putting the `/` after a folder will show what's in that folder
:::

## Your turn

1.  Open \`images_report/images-report.qmd\`
2.  In the `Source` view we'll link to an image in the same folder by putting the cursor between `()` and clicking Tab
3.  Then link to an image in a subfolder by putting the cursor after the `/` and then Tab
4.  Finishing with a link to an image in a subfolder from the main root

```{r}
#| eval: true
countdown::countdown(minutes = 5,
                     color_border = "#005EB8",
                     color_text = "#005EB8",
                     color_running_text = "white",
                     color_running_background = "#005EB8",
                     color_finished_text = "#005EB8",
                     color_finished_background = "white",
                     margin = "0.9em",
                     font_size = "2em")
```

## Seeing the image in the Source script

Using the drop down menu with a cog, found next to the blue arrow with `Render`

> Preview Images and Equations

will not be ticked, selecting this will allow Quarto to show the image in the report script.

:::{.callout-important collapse=false appearance='default' icon=true}
## Options change between Source and Visual
Images will always appear in the Visual view and the option to turn this off is not possible.
:::


## Alt text

**Alt**ernative **text** is predominately for people using screen readers to explain images but is very useful when images break:

. . .

Code should be `![](baker_3.png)`

``` markdown
![](img/bakers3.png){fig-alt="Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."}
```

. . .

Rendered image doesn't work but the text shows

![](img/bakers3.png){fig-alt="Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."}

## Alt text using Markdown

Text appears between `{}` that comes after the link:

``` markdown
![](img/bakers_3.png){fig-alt="Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."}
```

. . .

![](img/bakers_3.png){fig-alt="Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."}

## Alt text using HTML

Appears after `alt=""` code:

``` markdown
<div id="bakeoff">
  <img src="img/bakers_3.png" alt="Alt text:Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl.">
</div> 
```

. . .

::: {#bakeoff}
<img src="img/bakers_3.png" alt="Alt text:Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."/>
:::

## Alt text using `{knitr}`

Code used in R chunks

```{r}
#| echo: fenced
#| eval: false
#| fig-alt: "Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."

knitr::include_graphics("img/bakers_3.png")

```

. . .

```{r}
#| eval: true
#| fig-alt: "Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."

knitr::include_graphics("img/bakers_3.png")

```

## Checking for alt text

To see alt text, when the report is viewed in the browser (not in the presentation or Viewer pane in RStudio), right click and `Inspect Element`.

If you have the setting to view the report in R Studio select the button:

![](img/view-browser-button.PNG){fig-alt="Screenshot of the buttons in the Presentation pane of RStudio with the window icon with arrow pointing up the top right highlighted."}

And this will copy to the browser.

## Resizing images using Markdown

Markdown supports resizing and the best way to generate this code can be from the `Visual` view as the wizard has prompts.

The wizard gives options for captions, alternative text, centering and sizes.

## Resizing images using `{knitr}`

{knitr} can also be used with Quarto chunk options:

```{r}
#| echo: fenced
#| out-width: "50%"

knitr::include_graphics("img/bakers_3.png")
```

. . .

```{r}
#| eval: true
#| out-width: "50%"

knitr::include_graphics("img/bakers_3.png")
```

## Centre images

{knitr} in a code chunk can change where the image appears on the page:

```{r}
#| echo: fenced
#| out-width: "30%"
#| fig-align: center

knitr::include_graphics("img/bakers_3.png")
```

. . .

```{r}
#| eval: true
#| out-width: "30%"
#| fig-align: center

knitr::include_graphics("img/bakers_3.png")
```

## Quiz - 1

How do you add headers in Markdown?

`! Header`

`- Header`

`# Header`

`1. Header`

. . .

Answer: Headers is `#` hash

## Quiz - 2

What about lists? Bulleted? Numbered?

`! Item 1`

`- Item 1`

`# Item 1`

`1. Item 1`

. . .

Lists are `-` for bullets and `1.` for numbered

## Next Section {.smaller}

Artwork by @allison_horst. Illustrations from Hadley Wickham's ACM talk ["The Joy of Functional Programming (for Data Science"](https://allisonhorst.com/wickham-tidy-bakers)).