+ - 0:00:00
Notes for current slide
Notes for next slide

03

Images

1 / 21

Images

1

2 / 21

Images - markdown

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
![](http://bit.ly/blue-ribbon-sponge)
3 / 21

Images - markdown

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
![](http://bit.ly/blue-ribbon-sponge)

Competitive baking, such as making Victoria sponge (pictured), is part of the classic English village fête, which inspired the series.

3 / 21

A simple markdown code line for linking to an image online. html can be used too which can be useful if you need to resize the pictures.

Images - html

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
<div id="bg">
  <img src="http://bit.ly/blue-ribbon-sponge">
</div>
4 / 21

Images - html

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
<div id="bg">
  <img src="http://bit.ly/blue-ribbon-sponge">
</div>

Competitive baking, such as making Victoria sponge (pictured), is part of the classic English village fête, which inspired the series.

4 / 21

html can be used too

Images - using knitr

```{r}
knitr::include_graphics("images/joy-of-fp/bakers_1.png")
```
5 / 21

Images - using knitr

```{r}
knitr::include_graphics("images/joy-of-fp/bakers_1.png")
```

5 / 21

Images - navigating folders

2

6 / 21

Images - navigating folders

7 / 21

Images - navigating folders

Same folder

![](bakers_1.png)
7 / 21

Linking to an image in the same area as the .rmd file is straightforward, as is having a subfolder.

Images - navigating folders

Same folder

![](bakers_1.png)

Sub folder

![](img/bakers_2.png)
7 / 21

Linking to an image in the same area as the .rmd file is straightforward, as is having a subfolder.

Images - navigating folders

Same folder

![](bakers_1.png)

Sub folder

![](img/bakers_2.png)

Folder from subfolder from the main root

![](../images/bakers_3.png)
7 / 21

Linking to an image in the same area as the .rmd file is straightforward, as is having a subfolder.

But if the folder it up a level and down another then the pathway changes.

RMarkdown doesn't access the files in the project, only the files in its location.

Refresh on .RProj? Always use Projects.

The dot dot pathway finds the file but doesn't render in xaringan slides.

Markdown pathways to images

Open file 03-bakeoff-images.Rmd from the folder 03-images/

Together we will use markdown to link to an image:

  1. In the same folder

  2. In a subfolder

  3. In a subfolder from the main root

psst... we will be testing out the code from the previous slide!...

8 / 21

Same folder Sub folder Folder from subfolder from the main root

Note that autofills. To force a prompt to autofill use tab

Also if Global Options/RMarkdown/Show output inline for all R Markdown... is ticked the picture will automatically appear in the script. To remove untick but also requires a restart Ctrl + Shift + F10

Alt Text

3

9 / 21

Alt Text

When images break, they still make sense

10 / 21

Alt Text

When images break, they still make sense

Alt text: picture of a sponge cake from a village competition

10 / 21

Alternative text is useful for people who use screen readers but also helpful for when the image link breaks, you now get a description of what you should be seeing.

Alt Text

Markdown

Between the [] brackets

![Alt text: picture of a sponge cake from a village competition](http://bit.ly/blue-ribbon-sponge)
11 / 21

Alt Text

Markdown

Between the [] brackets

![Alt text: picture of a sponge cake from a village competition](http://bit.ly/blue-ribbon-sponge)

HTML

Within the <> and space between sections

<div id="bg">
  <img src="http://bit.ly/blue-ribbon-sponge" alt="Alt text: picture of a sponge cake from a village competition">
</div>
11 / 21

Alt Text continued

knitr

Use fig.alt=

```{r fig.alt="Alt text: picture of a sponge cake from a village competition"}
knitr::include_graphics("images/joy-of-fp/bakers_1.png")
```
12 / 21

By default, if you do not provide the fig.alt chunk option, the text in the figure caption provided by the fig.cap chunk option will be used as the alt text. You do not have to use fig.cap to use fig.alt- you may use each chunk option in isolation, but they will also work together.

From a blog on the new feature of {knitr}

Figure options

4

13 / 21

Captions

```{r fig.cap="Picture of a sponge cake from a village competition"}
knitr::include_graphics("bakers_1.png")
```
14 / 21

Captions

```{r fig.cap="Picture of a sponge cake from a village competition"}
knitr::include_graphics("bakers_1.png")
```
Picture of a sponge cake from a village competition

Picture of a sponge cake from a village competition

14 / 21

Resize images

```{r, out.width="50%"}
knitr::include_graphics("bakers_1.png")
```
15 / 21

Resize images

```{r, out.width="50%"}
knitr::include_graphics("bakers_1.png")
```

15 / 21

More information on resizing images (and charts too) from this blog

Centre images

```{r, fig.align='centre'}
knitr::include_graphics("bakers_1.png")
```

16 / 21

More resizing notes in this blog

Hyperlinks

5

17 / 21

Hyperlinks - markdown

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
[Photo](https://en.wikipedia.org/wiki/Philosophy)
![Alt text: picture of a sponge cake from a village competition](http://bit.ly/blue-ribbon-sponge)
18 / 21

Hyperlinks - markdown

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
[Photo](https://en.wikipedia.org/wiki/Philosophy)
![Alt text: picture of a sponge cake from a village competition](http://bit.ly/blue-ribbon-sponge)

Competitive baking, such as making Victoria sponge (pictured), is part of the classic English village fête, which inspired the series.

Photo

Alt text: picture of a sponge cake from a village competition

18 / 21

Links - html

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
  <a href="https://en.wikipedia.org/wiki/Philosophy">
  <img src="http://bit.ly/blue-ribbon-sponge" alt="Picture of a sponge cake from a village competition" 
  </a>
19 / 21

Links - html

Competitive baking, such as making Victoria 
sponge (_pictured_), is part of the classic 
English village fête,
which inspired the series.
  <a href="https://en.wikipedia.org/wiki/Philosophy">
  <img src="http://bit.ly/blue-ribbon-sponge" alt="Picture of a sponge cake from a village competition" 
  </a>

Competitive baking, such as making Victoria sponge (pictured), is part of the classic English village fête, which inspired the series. Picture of a sponge cake from a village competition

19 / 21

A good site for more information on html is W3schools

Quiz

How do you add headers in Markdown?

! Header

- Header

# Header

1. Header

20 / 21

Quiz

How do you add headers in Markdown?

! Header

- Header

# Header

1. Header

What about lists? Bulleted? Numbered?

! Item 1

- Item 1

# Item 1

1. Item 1

20 / 21

Answer: Headers is # hash Lists are - for bullets and 1. for numbered

Next section...

21 / 21

Images

1

2 / 21
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow