For include_graphics, out.width ignored when fig.cap is set

[ssp3nc3r]

For use of knitr::include_graphics: without a figure caption, an image width can be specified by out.width,

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

but out.width is ignored and uses 100% when fig.cap is used:

```{r, out.width="50%", fig.cap="Test"}
knitr::include_graphics("image.png")
```

Distill version 1.1.2, GithubSHA1: e53e8ff

[apreshill]

I can confirm I am seeing this too, not only with include graphics but any figures produced with R code, and not in a bookdown project.

https://github.com/apreshill/knitrfigcap

Code:

```{r nice-fig, fig.asp=.75, fig.align='center'}
par(mar = c(4, 4, .1, .1))
plot(pressure, type = 'b', pch = 19)
```

```{r ref.label="nice-fig", out.width="50%"}
```

```{r ref.label="nice-fig", fig.cap='Here is a nice figure!', out.width="50%"}
```

[jhelvy]

I'm seeing the same problem. My temporary fix is to use markdown syntax to insert an image (obviously doesn't work with rendered plots):

![Insert caption text](images/image.png){width=80%}

But this solution doesn't allow me to align the image (e.g. left, center, right). It's always left-justified.

[jhelvy]

Just noting that I think this has been fixed in v1.2. Images resize now with figure captions according to the out.width settings.

[cderv]

@jhelvy I don't think this has been fixed. Can you share a small example that works for you ?
This one above still don't: #286 (comment)

```{r nice-fig, fig.asp=.75, fig.align='center'}
par(mar = c(4, 4, .1, .1))
plot(pressure, type = 'b', pch = 19)
```

```{r ref.label="nice-fig", out.width="50%"}
```

```{r ref.label="nice-fig", fig.cap='Here is a nice figure!', out.width="50%"}
```

This is the HTML code that is outputed for the second plot

<div class="figure"><span style="display:block;" id="fig:unnamed-chunk-2"></span>
<img src="test_files/figure-html5/unnamed-chunk-2-1.png" alt="Here is a nice figure!" width="50%" style="max-width: 100%;">
<p class="caption">
Figure 1: Here is a nice figure!
</p>
</div>

The issue comes from the fact that knitr currently behave this way:

• when fig.cap is used, a figure environment is created using <div class="figure"> (and not <figure>)
• <img> and <p class="caption"> are put in this div.
• distill applies a specific css on .figure img which takes precedence over the width argument in <img>
  tag

distill/inst/rmarkdown/templates/distill_article/resources/distill.html

Lines 310 to 312 in cd7cf53

	.figure img {
	width: 100%;
	}

This CSS comes from distill and is inserted into the HTML. We need to see how we can tweak it.

Current workaround would be to override this CSS rule for the chunk to apply width using CSS style rule instead of img attribute.

[jhelvy]

After looking again at this, it seems to only be an issue when I define the width as a percentage. When I provide pixel values it works for me. On this post I include lots of figures with captions and different widths and they all work (source here).

[cderv]

Oh interesting ! However, I tried this and it still got me incorrect width

---
title: "Untitled"
output: distill::distill_article
---

```{r nice-fig, fig.asp=.75, fig.align='center'}
par(mar = c(4, 4, .1, .1))
plot(pressure, type = 'b', pch = 19)
```

```{r ref.label="nice-fig", out.width="300px"}
```

```{r ref.label="nice-fig", fig.cap='Here is a nice figure!', out.width="300px"}
```

Seems like the unit is the key. When removing it as you have done in your source, it works ok.

---
title: "Untitled"
output: distill::distill_article
---

```{r nice-fig, fig.asp=.75, fig.align='center'}
par(mar = c(4, 4, .1, .1))
plot(pressure, type = 'b', pch = 19)
```

```{r ref.label="nice-fig", out.width="300"}
```

```{r ref.label="nice-fig", fig.cap='Here is a nice figure!', out.width="300"}
```

I don't know why, but when no unit is passed width: 300px; is added into the style attributes of the image, which correct get precedence (re. what I mentioned in earlier comment)

<img src="data:image/png;base64,iVBORw0(...)" alt="Here is a nice figure!" width="300" style="max-width: 100%; width: 300px;">

I need to see where this difference in behavior happens.

However, this is a workaround for this issue.

[jhelvy]

Yes, I noticed the same behavior. If I included px in the width it would not resize appropriately, so I just took it out and it worked. I think a "workaround" is the right thing to call this rather than a fix. It's still something of a bug.

[cderv]

Oh yes this is still a bug for sure. But your finding is really interesting, I was not aware of this. Thanks to sharing it!

[cderv]

After much thinking and a few tries, I believe the safest things to do here is to remove the CSS rules that is taking precedence and rely only on inline attribute width= on <img>. We have a specific JS process that handle the layout and chunk image to support other that l-body. Hopefully, this will make things much better and aligned with past behavior (#41)