Inclusion image on left side and text on the right side using Markdown in Jekyll site?

Help
11

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>
2 Likes