So you have an image. And you want it on the right, with text flowing around it on the left. And you’re using Markdown to write your blog posts.
First, you insert the image like so:
![This is an image](/images/posts/thinking.jpg)
Then you run into the problem. The image is on the left. And it’s a block element; nothing flows around it.
What you want to do is wrap it in a
<div> tag, with Bootstrap’s
pull-right class to float it to the right.
But Markdown doesn’t let you add classes. But it does let you insert raw html. Yay! But you need block elements. And Markdown doesn’t interpret markdown text within html block elements. So this:
<div class='pull-right' style="border: 1px solid black; padding: 15px;"> ![This is an image](/images/posts/thinking.jpg) </div>
The trick is that, by default, Jekyll doesn’t actually use markdown; it uses kramdown, which is a superset of Markdown. And one of the additions kramdown provides to Markdown is an extra attribute you can add to an html block element. If you add markdown=”1” to the
div tag, markdown within the div tag is interpreted. So this:
<div class='pull-right' markdown="1"> ![This is an image](/images/posts/thinking.jpg) </div>
produces a right-floated image of Toby hoping that if he thinks hard enough, squirrels will rain from the sky.