adjust figure size/placement in a distill document

Question

I'm trying to put a small image into a distill document as part of a distill-based web site but having trouble with the placement (because I have a terrible mental model of what distill is doing and am not a CSS wizard). I would like the picture to be set to the left of text, ideally with the text flowing around it.

Here is my first attempt:

---
title: "Distill picture example"
site: distill::distill_website
---

<img align="left" src="django_small.png" width="50">
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Make this a little longer so it will demonstrate wrapping?)

And the result (compiling with rmarkdown::render()): the internal CSS machinery is overriding my requested width of 50 pixels and rendering the thing at full width instead.

Second attempt, where I explicitly tell distill that it should use the l-body-side layout:

---
title: "Distill picture example"
site: distill::distill_website
---

<div class "layout-chunk" data-layout="l-body side">
<img align="left" src="django_small.png" width="50">
</div>
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Not long enough to demonstrate wrapping?)

That's closer, but I would prefer that the picture be set to the left of the text (not above it), and ideally that the text flow around the picture. I have looked at the distill layout definitions, and this rstudio-distill issue which says that distill "does not support the inline floating image anymore" (but I would be OK with just setting the picture to the left, if I can't have it floating!), and this description of distill figure layouts, but I still can't get there.

I imagine there could be some magical combination of CSS and/or a two-column, one-row table layout that would do what I want but it would probably take hours of trial and error (beyond the time I've already spent) to figure it out ...

Answer 1

Found the answer in this blog post.

---
title: "Distill picture example"
site: distill::distill_website
---

:::float-image

```{r out.width='50px', out.extra='style="float:left; padding:10px"', echo=FALSE}
knitr::include_graphics("django_small.png")
```
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Not long enough to demonstrate wrapping?)

:::

---

Wrapping it in a table also appears to have been easier/worked better than I expected. (I would still love to make the text wrap around the picture if possible ...)

---
title: "Distill picture example"
site: distill::distill_website
---

<table>
<tr>
<td>
<img align="left" src="django_small.png" width="50">
</td>
<td>
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Not long enough to demonstrate wrapping?)
</td>
</tr>