It’s not directly involved with Jekyll issue but here it relates though, I’m using Markdown format on my Jekyll site. As demonstrated in the above picture, how can we accomplish this using Markdown on Jekyll? I know, Markdown is not the replacement of HTML but can we achieve such result using Markdown?
Already Visited: Stackoverflow
Kramdown allows for inline attributes. You can apply a CSS class to the image or inline style to float the image to the left so the text wraps on the right.
https://kramdown.gettalong.org/quickref.html#inline-attributes
{: style="float: left"}
Some text.
Have you tested it? {: style="float: left"}
Yes and it works as expected. The image get’s an inline style of float: left;
Have you tested it?
Yes, kinda. To test it, I made a github issue where I did something like the following, and It didn’t come out as expected.
It’s not going to work in GitHub issues… this is a Kramdown/Jekyll thing.
@mmistakes That’s really help. However, can we apply padding or margin to fit the image left and text on right like above image (in the question)?
Yes you can. It really depends on how you want to do it.
You can either add all the styling you want inline like above… just appended more styles to the float. e.g. {: style="float: left; margin-right: 1em;"}
Or better yet, you add as a class which you have CSS in your stylesheet you reference. This is more DRY.
/* add to you stylesheet */
.img-left {
float: left;
margin-right: 1em;
}
{: .img-left}
Awesome. However, here we get something like below
{: style="float: left"; margin-right: 10em; height="25%" width="25%"} ## Some Text On Left!<br>Some Text On Left!<br><br>Some Text On Left!Some Text On Left!Some Text
output:
We can scale the image as you suggested but how to scale text? What sorts of change I require here to achieve above demonstration (Image in Q.)? Or, do you suggest to use the HTML for this instead of the Markdown?
What you’ve written above isn’t valid Markdown that’s why ## Some Text On Left isn’t converting into a <h2>. You need a double line break for that to convert to a headline. Your inline CSS also isn’t valid, you’re mixing HTML attributes with CSS style.
To get this to work you likely need to wrap some things with divs to get the floats right. And at that point you’d have an easier time building this logic directly into a _layout or abstract out to a Jekyll include.
Markdown isn’t meant for doing layout like this.
The basic idea for an include would be:
{% include module.html image_path="graph_two.jpg" title="Some title text" description="Some more text that will appear to the left of the image." %}
_includes/module.html
<div style="clear: both;">
<div style="float: left; margin-right 1em;">
<img src="{{ include.image_path }}" alt="">
</div>
<div>
<h2>{{ include.title }}</h2>
{{ include.description | markdownify }}
</div>
</div>
Which will give you something like this after the include pulls in the data:
<div style="clear: both;">
<div style="float: left; margin-right 1em;">
<img src="graph_two.jpg" alt="">
</div>
<div>
<h2>Some title text</h2>
<p>Some more text that will appear to the left of the image.</p>
</div>
</div>
Fantastic! Thanks a lot. It works smoothly. 
Is there any reason you are using inline styles instead of classes regarding your css.
Inline css is okay but you have no control in changing it for different media queries.
Inline styles were used to simplify the example and explain the concept. There’s nothing preventing you from doing {: .img-left} or something similar.